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


174

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

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

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


जवाबों:


339

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

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

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

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

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

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

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

33

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

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

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

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

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

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

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

29

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

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

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

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

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

6

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

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

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

1

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

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');
    }
   });
  }
 };
}
);

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


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

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

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.