AngularJS: सबमिट और सर्वर प्रतिक्रिया के बीच सभी फॉर्म नियंत्रण को अक्षम करना

Question

जब मैं प्रपत्र नियंत्रण को अक्षम करना चाहता हूं (या कम से कम उन्हें उपयोगकर्ता संपर्क के लिए अनुपलब्ध कर देना चाहता हूं) तो मुझे इस बात की दुविधा है कि जब उपयोगकर्ता "सेव" या "सबमिट" बटन पर क्लिक करता है और तार पर यात्रा करने वाले डेटा। मैं JQuery का उपयोग नहीं करना चाहता (जो कि बुराई है !!!) और सरणी के रूप में सभी तत्वों को क्वेरी करें (वर्ग या विशेषता मार्कर द्वारा) मेरे द्वारा अब तक किए गए विचार हैं:

• cm-form-controlकस्टम निर्देशों के साथ सभी तत्वों को चिह्नित करें जो 2 सूचनाओं के लिए सदस्यता लेंगे: "डेटा-भेजा गया" और "डेटा-संसाधित"। तब कस्टम कोड दूसरी अधिसूचना को आगे बढ़ाने या एक वादे को हल करने के लिए जिम्मेदार है।
• का उपयोग करें promiseTracker(unfortunatelly!) की तरह अत्यंत बेवकूफ कोड का उत्पादन करने के लिए लागू होता है ng-show="loadingTracker.active()"। जाहिर है सभी तत्वों में नहीं है ng-disabledऔर मैं ng-hide/show"डांसिंग" बटन से बचने के लिए उपयोगकर्ता नहीं करना चाहता ।
• एक गोली काटें और अभी भी JQuery का उपयोग करें

क्या किसी के पास एक बेहतर विचार है? अग्रिम में धन्यवाद!

अद्यतन: फ़ील्ड विचार कार्य करता है। यहाँ उन लोगों के लिए एक सरल पहेली है जो अभी भी ऐसा ही करना चाहते हैं http://jsfiddle.net/YoMan78/pnQFQ/13/

HTML:

<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 या $ संसाधन?

— फ्रांस्वा रोमेन

इसका वास्तव में $ http जैसा कि मुझे कुछ भी बकाया से निपटने की आवश्यकता नहीं है।

— YoMan78

अक्षम फ़ील्ड IE में काम नहीं करते हैं, अर्थात समाधान नहीं है। मैं बूटस्ट्रैप मोडल का उपयोग करता हूं और बैकड्रॉप को स्टैटिक में सेट करता हूं।

— im1dermike

ध्यान दें कि लेखन के समय एक बग है जहां fieldsetफ्लेक्सबॉक्स कंटेनर के रूप में इस्तेमाल नहीं किया जा सकता है

— जॉर्ज

Answer 1

में आपके सभी क्षेत्रों लपेटें fieldset और प्रयोग ngDisabled इस तरह के निर्देश:

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

यह स्वचालित रूप से फ़ील्ड के अंदर सभी इनपुट को अक्षम कर देगा।

फिर http कॉल $scope.isSavingसे trueपहले और falseबाद में कंट्रोलर में सेट करें ।

Comments

ऐसा लगता है कि यह वास्तव में <बटन> के साथ भी ठीक काम करता है! बहुत बहुत धन्यवाद साशा।

— योन्मांगा

यह एक अच्छा टिप, हालांकि दुर्भाग्य से एक fieldset पर विकलांग विशेषता आईई या सफारी में समर्थित नहीं है है w3schools.com/tags/att_fieldset_disabled.asp

— kiwiaddo

@kiwiaddo यह मेरे परीक्षणों में IE9 + में अच्छा काम करता है। वैसे w3schools.com सर्वश्रेष्ठ संदर्भ वेबसाइट नहीं है। बेहतर यह पेज देखने के developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

— अलेक्जेंडर Puchkov

IE11 :-( में इनपुट टाइप बटन, टेक्स्ट और डिसेबल नहीं। बटन भी धूसर हो जाता है, लेकिन कोणीय क्लिक-हैंडलर अभी भी फायर करता है।

— सेबस्टियन

@ im1dermike आप सही है, यह वास्तव में IE में काम नहीं करता है। फ़ील्ड नेत्रहीन रूप से अक्षम है, लेकिन उपयोगकर्ता अभी भी इसके साथ बातचीत कर सकता है और इसे संपादित कर सकता है जैसे कि यह सक्षम था। इसके लिए आईई में एक बग पहले से ही प्रस्तुत किया गया था और इसे ठीक किया गया था, लेकिन अभी तक इसे शिप नहीं किया गया है। यह अगले IE प्रमुख रिलीज कनेक्ट

— अलेक्जेंडर पुचकोव

Answer 2

आधुनिक ब्राउज़रों में एक सरल उपाय है:

1. एक सीएसएस वर्ग को परिभाषित करें

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

2. इस वर्ग को जोड़ें ng-form

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

यहाँ है सूचक-घटनाओं समर्थन चार्ट।

नोट: यदि आप सेट करते हैं pointer-events: none, तब भी आप अपने कीबोर्ड से इनपुट एलिमेंट को टैब कर सकते हैं।