AngularJS: জমা এবং সার্ভার প্রতিক্রিয়া মধ্যে ফর্ম নিয়ন্ত্রণগুলি অক্ষম করা ab

Question

আমি যখন কোনও সময়কালে "সংরক্ষণ করুন" বা "জমা দিন" বোতামটি ক্লিক করে ফর্ম নিয়ন্ত্রণগুলি (বা কমপক্ষে তাদের ব্যবহারকারীর মিথস্ক্রিয়ের জন্য অনুপলব্ধ করে তুলতে চাই) তবে ফর্ম নিয়ন্ত্রণগুলি অক্ষম করতে চাইলে আমার সেরা (এবং সঠিক) পদ্ধতির কী হবে সে সম্পর্কে আমার দ্বিধা রয়েছে I এবং তারের উপর দিয়ে ভ্রমণ ভ্রমণ। আমি JQuery (যা খারাপ !!!) ব্যবহার করতে চাই না এবং অ্যারের হিসাবে সমস্ত উপাদানকে জিজ্ঞাসা করতে পারি (শ্রেণি বা গুণাবলী অনুসারে) আমার এ পর্যন্ত যে ধারণাগুলি ছিল তা হ'ল:

• সমস্ত উপাদানকে cm-form-controlকাস্টম নির্দেশনা দিয়ে চিহ্নিত করুন যা 2 টি বিজ্ঞপ্তির জন্য সাবস্ক্রাইব করবে: "ডেটা-প্রেরিত" এবং "ডেটা-প্রক্রিয়াজাত"। তারপরে কাস্টম কোড দ্বিতীয় বিজ্ঞপ্তি ঠেকানোর জন্য বা কোনও প্রতিশ্রুতি সমাধানের জন্য দায়বদ্ধ।
• এটি ব্যবহার করুন promiseTracker(দুর্ভাগ্যক্রমে!) অত্যন্ত বোকা কোড তৈরি করার মতো কার্যকর করে ng-show="loadingTracker.active()"। স্পষ্টতই সমস্ত উপাদানগুলির নেই ng-disabledএবং আমি ব্যবহারকারীকে ng-hide/show"নৃত্য" বোতামগুলি এড়াতে চাই না ।
• একটি বুলেট কামড়ান এবং এখনও JQuery ব্যবহার করুন

কারও কি আরও ভাল ধারণা আছে? আগাম ধন্যবাদ!

আপডেট করা: ফিল্ডসেট ধারণাটি কাজ করে। যারা এখনও একই কাজ করতে চান তাদের জন্য এখানে একটি সরল ফিডল http://jsfiddle.net/YoMan78/pnQFQ/13/

এইচটিএমএল:

<div ng-app="myApp">
    <ng-form ng-controller="myCtrl">
        Saving: {{isSaving}}
        <fieldset ng-disabled="isSaving">
            <input type="text" ng-model="btnVal"/>
            <input type="button" ng-model="btnVal" value="{{btnVal}}"/>
            <button ng-click="save()">Save Me Maybe</button>
        </fieldset>
    </ng-form>
</div>

এবং জেএস:

var angModule = angular.module("myApp", []);

angModule.controller("myCtrl", function ($scope, $filter, $window, $timeout) {
    $scope.isSaving = undefined;
    $scope.btnVal = 'Yes';
    $scope.save = function()
    {
        $scope.isSaving = true;
        $timeout( function()
             {
                 $scope.isSaving = false;
                 alert( 'done');
             }, 10000);
    };
});

Comments

আপনি ফর্মটি থেকে ডেটা পাঠাতে কোন পরিষেবাটি ব্যবহার করছেন? $ এইচটিপি বা $ সংস্থান?

— ফ্রান্সোইস রোমেন

এর প্রকৃতপক্ষে $ http হিসাবে আমার কোনও বকেয়া জিনিস মোকাবেলার দরকার নেই।

— YoMan78

অক্ষম ফিল্ডসেটগুলি IE এ কাজ করে না, অর্থাত্ কোনও সমাধান নয়। আমি একটি বুটস্ট্র্যাপ মডেল ব্যবহার করি এবং ব্যাকড্রপ স্থিতিতে সেট করি।

— im1dermike

দ্রষ্টব্য যে লেখার সময় একটি বাগ রয়েছে যেখানে fieldsetএকটি ফ্লেক্সবক্স ধারক হিসাবে ব্যবহার করা যায় না

— জর্জ

Answer 1

আপনার সমস্ত ক্ষেত্রটি ফিল্ডসেটে মুড়ে রাখুন এবং এনজিডিয়েবল ডাইরেক্টিভটি এর মতো ব্যবহার করুন :

<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>

এটি ফিল্ডসেটের ভিতরে সমস্ত ইনপুট স্বয়ংক্রিয়ভাবে অক্ষম করবে।

তারপরে কন্ট্রোলারে http কল $scope.isSavingকরার trueআগে এবং falseপরে সেট করা হবে ।

Comments

দেখে মনে হচ্ছে এটি <বাটন> এর সাথেও দুর্দান্ত কাজ করে! অনেক অনেক ধন্যবাদ শশা।

— YoMan78

এটি একটি ভাল পরামর্শ, যদিও দুর্ভাগ্যক্রমে একটি ফিল্ডসেটে অক্ষম বৈশিষ্ট্যটি IE বা সাফারি w3schools.com/tags/att_fieldset_disabled.asp- এ

— কিউইয়াদডো

@kiwiaddo এটি আমার পরীক্ষাগুলিতে আই 99 + এ ভাল কাজ করে। যাইহোক w3schools.com সেরা রেফারেন্স ওয়েবসাইট নয়। এই পৃষ্ঠাটি আরও ভাল করে দেখুন ডেভেলপার.মোজিলা.আর.ইন

— ইউএস /

ইনপুট টাইপ বোতাম, পাঠ্য এবং ফাইল IE11 :-( এ অক্ষম নয়, এছাড়াও বোতামটি ধূসর হয়ে গেছে তবে কৌনিক এনজি-ক্লিক-হ্যান্ডলারটি এখনও আগুন

— সেবাস্তিয়ান

@ im1dermek আপনি ঠিকই, এটি আসলে IE তে কাজ করে না। ক্ষেত্রটি দৃশ্যত অক্ষম হিসাবে স্টাইল করা হয়েছে, তবে ব্যবহারকারী এখনও এটির সাথে ইন্টারঅ্যাক্ট করতে এবং এটি সক্ষম করা হয়েছে এমনভাবে এটি সম্পাদনা করতে পারে। ইতিমধ্যে জমা দেওয়ার জন্য আইই-তে একটি ত্রুটি রয়েছে এবং এটি ঠিক হয়ে গেছে, তবে এখনও পাঠানো হয়নি। এটি পরের আইই প্রধান রিলিজের সাথে উপলব্ধ হবে। কানেক্ট.মাইক্রোসফট

— আলেকজান্ডার পুচকভ

Answer 2

আধুনিক ব্রাউজারগুলিতে একটি সহজ সমাধান রয়েছে:

1. একটি সিএসএস ক্লাস সংজ্ঞায়িত করুন

   .disabled {
     pointer-events: none;
     ... ...
   }

2. এই ক্লাসে যোগ করুন ng-form

   <ng-form data-ng-class="{ 'disabled': isSaving }"> ... inputs ... </ng-form>

এখানে হয় পয়েন্টার-ঘটনা সমর্থন চার্ট।

দ্রষ্টব্য: আপনি সেট করা থাকলেও আপনি pointer-events: noneএখনও আপনার কীবোর্ডের সাহায্যে ইনপুট উপাদানটিকে ট্যাব করতে পারেন।