Wie überprüfe ich die Gültigkeit von Formularen mit anglejs?

Ich bin sehr neu in Angularjs. Angenommen, meine App hat ein Formular. Mit dem Inspektor habe ich festgestellt, dass wenn anglejs das Formular für ungültig hält, dem Formular eine ng-ungültige Klasse hinzugefügt wird. Schön.

Um zu überprüfen, ob das Formular gültig ist, muss ich meinen Code mit dem Jquery-Selektor verschmutzen?! Wie kann Angularjs die Gültigkeit eines Formulars anzeigen, ohne einen Formularcontroller zu verwenden?

Wenn Sie ein <form>Tag in Ihre ngApp einfügen, fügt AngularJS automatisch einen Formular-Controller hinzu (tatsächlich gibt es eine Direktive, die formdas erforderliche Verhalten hinzufügt). Der Wert des Namensattributs wird in Ihrem Bereich gebunden. so etwas wie <form name="yourformname">...</form>wird befriedigen:

Ein Formular ist eine Instanz von FormController. Die Formularinstanz kann optional über das Attribut name im Bereich veröffentlicht werden.

Um die Gültigkeit des Formulars zu überprüfen, können Sie den Wert der $scope.yourformname.$validEigenschaft des Gültigkeitsbereichs überprüfen .

Weitere Informationen finden Sie im Abschnitt Entwicklerhandbuch zu Formularen.

Beispiel

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>

Sie können auch verwenden myform.$invalid

Z.B

if($scope.myform.$invalid){return;}

bilden

• Direktive im Modul ng Direktive, die FormController instanziiert.

Wenn das Attribut name angegeben wird, wird der Formularcontroller unter diesem Namen im aktuellen Bereich veröffentlicht.

Alias: ngForm

In Angular können Formulare verschachtelt werden. Dies bedeutet, dass das äußere Formular gültig ist, wenn auch alle untergeordneten Formulare gültig sind. Browser erlauben jedoch keine Verschachtelung von Elementen, daher stellt Angular die ngForm-Direktive bereit, die sich identisch verhält, aber verschachtelt werden kann. Auf diese Weise können Sie verschachtelte Formulare verwenden. Dies ist sehr nützlich, wenn Sie Angular-Validierungsanweisungen in Formularen verwenden, die mithilfe der ngRepeat-Direktive dynamisch generiert werden. Da Sie das Namensattribut von Eingabeelementen nicht dynamisch mithilfe der Interpolation generieren können, müssen Sie jeden Satz wiederholter Eingaben in eine ngForm-Direktive einschließen und diese in einem äußeren Formularelement verschachteln.

CSS-Klassen

ng-valid wird gesetzt, wenn das Formular gültig ist.

ng-invalid wird gesetzt, wenn das Formular ungültig ist.

ng-pristine wird gesetzt, wenn die Form makellos ist.

ng-dirty wird gesetzt, wenn das Formular verschmutzt ist.

ng-submit wird festgelegt, wenn das Formular gesendet wurde.

Beachten Sie, dass ngAnimate jede dieser Klassen beim Hinzufügen und Entfernen erkennen kann.

Senden eines Formulars und Verhindern der Standardaktion

Da sich die Rolle von Formularen in clientseitigen Angular-Anwendungen von der in klassischen Roundtrip-Anwendungen unterscheidet, ist es wünschenswert, dass der Browser die Formularübermittlung nicht in ein erneutes Laden aller Seiten übersetzt, das die Daten an den Server sendet. Stattdessen sollte eine Javascript-Logik ausgelöst werden, um die Formularübermittlung anwendungsspezifisch zu behandeln.

Aus diesem Grund verhindert Angular die Standardaktion (Formularübermittlung an den Server), sofern für das Element kein Aktionsattribut angegeben ist.

Sie können eine der folgenden zwei Möglichkeiten verwenden, um anzugeben, welche Javascript-Methode beim Senden eines Formulars aufgerufen werden soll:

ngSubmit- Direktive für das Formularelement

ngKlicken Sie auf die Direktive auf die erste Schaltfläche oder das Eingabefeld vom Typ submit (Eingabe [Typ = Submit]).

Verwenden Sie nur eine der Anweisungen ngSubmit oder ngClick, um eine doppelte Ausführung des Handlers zu verhindern.

Dies liegt an den folgenden Formularübermittlungsregeln in der HTML-Spezifikation:

Wenn ein Formular nur ein Eingabefeld enthält, löst das Drücken der Eingabetaste in diesem Feld das Senden des Formulars (ngSubmit) aus, wenn ein Formular 2+ Eingabefelder und keine Schaltflächen enthält, oder das Drücken der Eingabetaste löst das Senden input[type=submit]nicht aus, wenn ein Formular ein oder mehrere Eingabefelder und enthält Wenn Sie eine oder mehrere Schaltflächen drücken oder input[type=submit]dann in einem der Eingabefelder die Eingabetaste drücken, wird der Klick-Handler auf der ersten Schaltfläche oder input[type=submit](ngClick) und ein Submit-Handler auf dem beiliegenden Formular (ngSubmit) ausgelöst.

Alle ausstehenden Änderungen an ngModelOptions werden sofort wirksam, wenn ein beiliegendes Formular gesendet wird. Beachten Sie, dass ngClick-Ereignisse auftreten, bevor das Modell aktualisiert wird.

Verwenden Sie ngSubmit, um auf das aktualisierte Modell zuzugreifen.

app.js :

angular.module('formExample', [])
  .controller('FormController', ['$scope', function($scope) {
    $scope.userType = 'guest';
  }]);

Form :

<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
  userType = {{userType}}
  myForm.input.$valid = {{myForm.input.$valid}}
  myForm.input.$error = {{myForm.input.$error}}
  myForm.$valid = {{myForm.$valid}}
  myForm.$error.required = {{!!myForm.$error.required}}
 </form>

Quelle: AngularJS: API: Formular