Wyłącz przycisk przesyłania, gdy formularz jest nieprawidłowy w AngularJS

Mam taki formularz:

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

Jak widać, przycisk jest wyłączony, jeśli wejście jest puste, ale nie zmienia się z powrotem na włączony, gdy zawiera tekst. Jak mogę to zrobić?

Musisz użyć nazwy swojego formularza, a także ng-disabled: Oto demo na Plunker

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

Aby dodać do tej odpowiedzi. Właśnie się dowiedziałem, że również się zepsuje, jeśli użyjesz łącznika w nazwie formularza (Angular 1.3):

Więc to nie zadziała:

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

Wybrana odpowiedź jest poprawna, ale ktoś taki jak ja może mieć problemy z walidacją asynchroniczną przy wysyłaniu żądania do serwera - przycisk nie będzie wyłączony podczas przetwarzania danego żądania, więc przycisk będzie mrugał, co dla użytkowników wygląda dość dziwnie.

Aby to unieważnić, wystarczy obsłużyć stan $ pending formularza:

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

Jeśli korzystasz z Reactive Forms, możesz użyć tego:

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

Możemy utworzyć prostą dyrektywę i wyłączyć przycisk, aż wszystkie obowiązkowe pola zostaną 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');
    }
   });
  }
 };
}
);

Aby uzyskać więcej informacji, kliknij tutaj

<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 rygorystyczny