Deaktivieren Sie die Schaltfläche "Senden", wenn das Formular mit AngularJS ungültig ist

Ich habe meine Form so:

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

Wie Sie vielleicht sehen, ist die Schaltfläche deaktiviert, wenn die Eingabe leer ist, sie wird jedoch nicht wieder aktiviert, wenn sie Text enthält. Wie kann ich es zum Laufen bringen?

Sie müssen den Namen Ihres Formulars sowie ng-disabled verwenden: Hier ist eine Demo zu Plunker

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

Zu dieser Antwort hinzufügen. Ich habe gerade herausgefunden, dass es auch zusammenbricht, wenn Sie einen Bindestrich in Ihrem Formularnamen verwenden (Winkel 1.3):

Das wird also nicht funktionieren:

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

Die ausgewählte Antwort ist korrekt, aber jemand wie ich hat möglicherweise Probleme mit der asynchronen Validierung beim Senden einer Anfrage an den Server. Die Schaltfläche wird während der Verarbeitung einer bestimmten Anforderung nicht deaktiviert, sodass die Schaltfläche blinkt, was für die Benutzer ziemlich seltsam aussieht.

Um dies aufzuheben, müssen Sie nur den Status $ ausstehend des Formulars verarbeiten:

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

Wenn Sie reaktive Formulare verwenden, können Sie Folgendes verwenden:

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

Wir können eine einfache Anweisung erstellen und die Schaltfläche deaktivieren, bis alle Pflichtfelder ausgefüllt sind.

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

Für weitere Informationen klicken Sie hier

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

Wenn Sie etwas strenger sein wollen