AngularJS के साथ अमान्य होने पर सबमिट बटन को अक्षम करें

Question

मेरा रूप इस तरह है:

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button disabled="{{ myForm.$invalid }}">Save</button>
</form>

जैसा कि आप देख सकते हैं, यदि इनपुट खाली है तो बटन अक्षम है लेकिन जब पाठ होता है तो यह वापस सक्षम में नहीं बदलता है। मैं इसे कैसे कारगर बना सकता हूं?

Comments

angulartutorial.net/2016/04/04/…

— Prashobh

Answer 1

आपको अपने फॉर्म के नाम के साथ-साथ एनजी-अक्षम का उपयोग करने की आवश्यकता है: यहां प्लंकर पर एक डेमो है

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="myForm.$invalid">Save</button>
</form>

Comments

क्षमा करें, अब मैं इसका उपयोग करता हूं। फिर भी, यह तब भी अक्षम होता है जब टेक्स्टबॉक्स में टेक्स्ट होता है

— अली

संयोग से, मैं सिर्फ तुम्हारा यह महान पोस्ट पढ़ रहा था: benlesh.com/2012/11/angular-js-form-validation.html

— बेन

क्या होगा अगर मेरे पास कोई फॉर्म नहीं है? क्या मैं दिव्य तत्व पर भी कर सकता हूँ?

— VsMXX

तकनीकी रूप से @MichaelCwienczek, आप div टैग में एनजी-फॉर्म जोड़ सकते हैं <div ng-form="myForm"> ... stuff here .. </div>:। यद्यपि, यदि आप बटन पुश पर, इनपुट से एक मान जमा कर रहे हैं, तो मैं एक टैग का उपयोग करने की अत्यधिक सलाह देता हूं <form/>, यदि इसके अलावा कोई अन्य कारण नहीं है, तो यह उपयोगकर्ता को [ENTER] हिट करने और फ़ॉर्म सबमिट करने की अनुमति देता है। लेकिन यह संभावना की चिंताओं जैसी चीजों के कारण बेहतर अभ्यास का भी गठन करता है।

— बेन लेश

@BenLesh, क्या होगा अगर सबमिट बटन मेरे फॉर्म के अंदर नहीं है और फिर भी मुझे अमान्य होने पर फॉर्म को निष्क्रिय करना होगा।

— ग्रीन जादूगर

Answer 2

इस उत्तर को जोड़ने के लिए। मुझे अभी पता चला है कि अगर आप अपने फॉर्म नाम (कोणीय 1.3) में एक हाइफ़न का उपयोग करते हैं तो यह भी टूट जाएगा।

तो यह काम नहीं करेगा :

<form name="my-form">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="my-form.$invalid">Save</button>
</form>

Comments

हां, फॉर्म का नाम किसी भी AngularJS फॉर्म सत्यापन के लिए ऊंट मामले में होना चाहिए।

— डबिला

अंगूठे के एक नियम के रूप में, सभी जेएस जैसे भाव ऊंट के रूप में वस्तुओं को पहचानेंगे, जबकि डैश HTML के लिए सिंटैक्स की तरह है

— इकोलॉजिक

तो, क्या होता है यदि फॉर्म एक फॉर्मेट का सदस्य है, और इसलिए इसमें नाम w / hyphen होना आवश्यक है (जैसे "my_formset_name-0")?

— ट्रिब्लीफोन

उपरोक्त उदाहरण में, मेरा मानना ​​है कि myForm.$invalidअभी भी काम करना चाहिए, इसलिए आपके मामले में, मुझे लगता है कि my_formset_name0.$invalidकाम करना चाहिए।

— wvdz

Answer 3

चयनित प्रतिक्रिया सही है, लेकिन मेरे जैसे किसी व्यक्ति के पास सर्वर-साइड पर अनुरोध भेजने के साथ async सत्यापन के मुद्दे हो सकते हैं - दिए गए अनुरोध प्रसंस्करण के दौरान बटन अक्षम नहीं होगा, इसलिए बटन झपकेगा, जो उपयोगकर्ताओं के लिए बहुत अजीब लग रहा है।

इसे शून्य करने के लिए, आपको केवल $ लंबित स्थिति को संभालने की आवश्यकता है:

<form name="myForm">
  <input name="myText" type="text" ng-model="mytext" required />
  <button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>

Comments

Async सत्यापन समाधान के लिए बहुत बहुत धन्यवाद!

— मार्टिन ब्रैंडल

आपको बस उपयोग करना चाहिए !myForm.$validजो async लंबित मुद्दों को भी संभालता है। itnext.io/valid-and-invalid-in-angular-forms-61cfa3f2a0cd

— SavageCore

Answer 4

यदि आप रिएक्टिव फॉर्म का उपयोग कर रहे हैं, तो आप इसका उपयोग कर सकते हैं:

<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>

Comments

यद्यपि यह "कोणीय" के लिए वैध सलाह है, यह उत्तर "कोणीयरज" के लिए अमान्य है। अर्थात्, (click)और [disabled]मान्य नहीं हैं AngularJS कोड, और न ही प्रतिक्रियाशील प्रपत्र AngularJS ढांचे का एक हिस्सा हैं। "कोणीय आज और कल की कोणीय के लिए नाम है AngularJS का कोणीय सभी v1.x संस्करणों के लिए नाम है।" Angular.io/guide/ajs-quick-reference

— dapperdan1985

Answer 5

हम एक साधारण निर्देश बना सकते हैं और बटन को तब तक अक्षम कर सकते हैं जब तक कि सभी अनिवार्य फ़ील्ड भर न जाएँ।

angular.module('sampleapp').directive('disableBtn',
function() {
 return {
  restrict : 'A',
  link : function(scope, element, attrs) {
   var $el = $(element);
   var submitBtn = $el.find('button[type="submit"]');
   var _name = attrs.name;
   scope.$watch(_name + '.$valid', function(val) {
    if (val) {
     submitBtn.removeAttr('disabled');
    } else {
     submitBtn.attr('disabled', 'disabled');
    }
   });
  }
 };
}
);

अधिक जानकारी के लिए यहां क्लिक करें

Comments

आपके समाधान का तरीका मेरे लिए थोड़ा ट्वीक है। धन्यवाद

— टाटीपका

जब ng-disabledआप कोणीय 1.x और [disabled]कोणीय 2 | 4.x में देशी निर्देश हैं, तो आप ऐसा क्यों करेंगे ? दूसरे, क्यों एक निर्देश है कि एक नेस्टेड बटन को निष्क्रिय करने के लिए एक रूप में स्कूप किया गया है, यह सुपर विशिष्ट है। एक बीमार सोचा समाधान IMO।

— डेविड बार्कर

ऊपर एक नमूना निर्देश है, मूल में नेस्टेड चेक बॉक्स आदि जैसे कई परिदृश्य हैं और मैं हर फॉर्म में जोड़कर अपने HTML कोड को गड़बड़ नहीं करना चाहता, इसके बजाय यह निर्देश सभी चीजों का ध्यान रखेगा।

— Prashobh

Answer 6

<form name="myForm">
        <input name="myText" type="text" ng-model="mytext" required/>
        <button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button>
</form>

अगर आप थोड़ा और सख्त होना चाहते हैं