अक्षम सबमिट बटन जब प्रपत्र AngularJS साथ अवैध

Question

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

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

जैसा कि आप देख सकते हैं, बटन अक्षम है यदि इनपुट रिक्त है, लेकिन यह करने के लिए वापस नहीं बदलता है सक्षम जब यह पाठ है मैं इसे कैसे कारगर बना सकता हूं? Here's a demo on Plunker

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

Answer 1

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

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

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

Answer 2

इस उत्तर को जोड़ने के लिए:

Answer 3

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

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

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

Answer 4

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

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

For More Info click here

Answer 5

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

क्या आप रिएक्टिव प्रपत्र उपयोग कर रहे हैं तो आप इस का उपयोग कर सकते में थोड़ा और अधिक सख्त

Answer 6

होना चाहते हैं:

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