Wyłącz przesłać przycisk, gdy forma nieważne z angularjs

Question

mam formę takiego:

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

Jak można zobaczyć, przycisk jest wyłączona, jeśli wejście jest pusty, ale to nie zmienia z powrotem włączona kiedy go zawiera tekst. Jak mogę to sprawić?

Answer 1

Trzeba użyć nazwę swojej postaci, a także NG-inwalidów: 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 2

dodać do tej odpowiedzi. Właśnie dowiedziałem się, że będzie to również przełamać jeśli użyć myślnika w nazwie postaci (kątowe 1.3):

więc będzie nie praca:

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

Answer 3

Wybrano odpowiedź jest poprawna, ale ktoś tak jak ja, mogą mieć problemy z sprawdzaniem asynchronizacji z wysyłaniem żądania do serwera - przycisk nie będzie wyłączony podczas danego przetwarzania żądania, więc przycisk będzie migał, co wygląda dość dziwnie dla użytkowników.

Aby to nieważne, po prostu trzeba obsłużyć $ oczekiwaniu stanu w postaci:

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

Answer 4

Możemy stworzyć prosty dyrektywy i wyłączyć przycisk, aż wszystkie wymagane pola są wypełnione.

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>

Jeśli chcesz być nieco bardziej rygorystyczne

Answer 6

Jeśli używasz reaktywnych form można użyć to:

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