So erstellen Sie formbasierte Richtlinien in AngularJs

Kernpunkte

• Erstellen Sie wiederverwendbare Formkomponenten mit AngularJS -Direktiven.
• Implementieren Sie benutzerdefinierte Überprüfungsmethoden in Direktiven, um eine komplexe Eingabeüberprüfung zu verarbeiten, um die Datenintegrität zu gewährleisten, bevor Sie an den Server übermittelt werden.
• Verwenden Sie die integrierten AngularJS-integrierten Form-Verifizierungstechnologien (wie ng-required und ng-pattern), um die Kundeneingabeüberprüfung schnell festzulegen.
• Verwenden Sie FormController in AngularJS, um den Formularstatus und die Überprüfung zu verwalten, um Benutzern sofortiges Feedback zu geben und die Benutzererfahrung zu verbessern.
• Verwenden Sie die ng-submit -Richtlinie, um Formulareinreichungen in AngularJs zu verarbeiten, das Standardeinstellungsverhalten zu blockieren und benutzerdefinierte Überprüfungslogik zu aktivieren, bevor Daten an den Server gesendet werden.

Viele Entwickler stehen vor einzigartigen Herausforderungen, wenn sie komplexe Geschäftsbeschränkungen für vom Benutzer eingereichte Daten ausführen. Vor kurzem stand mein Team mit dieser Herausforderung, als ich eine Bewerbung bei Giftcards.com schrieb. Wir müssen einen Weg finden, um unseren Kunden zu ermöglichen, mehrere Produkte in einer Ansicht zu bearbeiten, jeweils ihre eigenen einzigartigen Überprüfungsregeln.

Dies ist eine Herausforderung, da wir mehrere <form></form> -Tags im HTML -Quellcode verwenden und für jede Forminstanz ein Validierungsmodell verwalten. Bevor wir die Lösung finden, haben wir viele Methoden ausprobiert, z. B. die Verwendung von ngRepeat zur Anzeige von Unterformen. Schließlich erstellen wir eine Anweisung für jeden Produkttyp (jede Richtlinie hat eine <form></form> in ihrer Ansicht) und lassen die Richtlinie an ihren übergeordneten Controller binden. Dies ermöglicht es uns, die übergeordnete Kinderformform von Angular zu nutzen, um sicherzustellen, dass das übergeordnete Formular nur dann gültig ist, wenn alle untergeordneten Formulare gültig sind. In diesem Tutorial erstellen wir einen einfachen Produktbewertungsbildschirm (Markierung der Schlüsselkomponenten unserer aktuellen Anwendung). Wir werden zwei Produkte mit jeweils eigenen Anweisungen haben und jedes Produkt hat einzigartige Überprüfungsregeln. Es wird eine einfache Schaltfläche zum Checkout geben, mit der sichergestellt wird, dass beide Formulare gültig sind.

Wenn Sie darauf bedacht sind, zu sehen, wie es tatsächlich funktioniert, können Sie direkt zu unserer Demo springen oder den Code aus unserem Github -Repository herunterladen.

Über den Befehl

Die

-Richtlinie ist ein Stück HTML -Code, das den HTML -Compiler von AngularJS ($compile) durchläuft und an die DOM angeschlossen ist. Der Compiler ist dafür verantwortlich, das DOM zu durchqueren und Komponenten zu finden, die er mit anderen registrierten Anweisungen in Objekte konvertieren kann. Richtlinien arbeiten in einem isolierten Bereich und pflegen ihre eigenen Ansichten. Sie sind leistungsstarke Tools, die wiederverwendbare Komponenten ermöglichen, die während der gesamten Anwendung gemeinsam genutzt werden können. Eine kurze Überprüfung finden Sie in diesem Artikel oder AngularJS -Dokumentation.

Die

-Richtlinie löst unser grundlegendes Problem auf zwei Arten: Erstens hat jede Instanz einen isolierten Bereich; Diese integrierte Anweisung ermöglicht es mehreren verschachtelten Formularelementen, ein optionales ngForm Attribut zu akzeptieren, um name zu instanziieren und das Formularobjekt zurückzugeben. FormController

Über FormController

Wenn der Compiler jedes Formularobjekt im DOM erkennt, wird ein

-Objekt mithilfe der ngForm -Direktive instanziiert. Dieser Controller scannt alle Eingangs-, Auswahl- und Textbereichselemente und erstellt entsprechende Steuerelemente. Die Steuerung erfordert eine Modelleigenschaft, um eine Zwei-Wege-Datenbindung einzurichten, und ermöglicht sofortige Benutzer-Feedback über verschiedene vorgefertigte Verifizierungsmethoden. Geben Sie den Verbrauchern sofortiges Feedback, sodass sie wissen, welche Informationen gültig sind, bevor HTTP -Anforderungen gestellt werden. FormController

vorgebaute Verifizierungsmethode

Winkelpakete 14 Standardverifizierungsmethoden. Dazu gehören

, min, max und andere Validatoren. Sie sind gebaut, um fast alle HTML5-Eingangstypen zu verstehen und zu manipulieren und sind kreuzbrowserkompatibel. required

<input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span>

Das obige Beispiel zeigt, wie der Validator

Richtlinie in Angular verwendet wird. Diese Überprüfung stellt sicher, dass das Feld ausgefüllt wird, bevor es als gültig angesehen wird. Es werden keine Daten überprüft, sondern der Benutzer wird nur etwas eingegeben. Das Attribut ngRequired bedeutet, dass der Browser bei der Übermittlung nicht überprüfen sollte. novalidate

Pro -Tipp: Setzen Sie nicht

Attribute in einer Winkelform. Dies verhindert, dass Angular versucht, sicherzustellen, dass das Formular nicht in einer Hin- und Rückfahrt eingereicht wird. action

benutzerdefinierte Verifizierungsmethode

Angular bietet eine umfangreiche API, mit der benutzerdefinierte Validierungsregeln erstellt werden können. Mit dieser API können Sie Ihre eigenen Validierungsregeln für komplexe Eingaben erstellen und erweitern, die nicht in Standardvalidierung behandelt werden. Mein Team ist auf einige benutzerdefinierte Validierungsmethoden angewiesen, um die komplexen regulären Ausdrucksmuster auszuführen, die unser Server verwendet. Ohne die Möglichkeit, einen komplexen regulären Ausdrucks -Matcher auszuführen, senden wir möglicherweise falsche Daten an den Backend -Server. Dies zeigt Fehler für den Benutzer, was zu einer schlechten Benutzererfahrung führt. Benutzerdefinierte Validatoren verwenden die Direktivensyntax und müssen

injiziert werden. Weitere Informationen finden Sie durch Beratung der AngularJS -Dokumentation. ngModel

Erstellen Sie den Controller

Jetzt können wir unsere Bewerbung starten. Hier finden Sie einen Überblick über den Controller -Code.

Der Controller wird im Mittelpunkt der Dinge stehen. Es hat nur wenige Verantwortlichkeiten - seine Ansicht hat ein Formularelement mit dem Namen

, es hat nur ein Attribut und seine Methoden werden parentForm, registerFormScope und validateChildForm enthalten. checkout

Controller -Eigenschaften

Wir brauchen eine Eigenschaft im Controller:

<input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span>

Diese Eigenschaft wird verwendet, um den Booleschen Zustand der Gesamtgültigkeit des Formulars aufrechtzuerhalten. Wir verwenden diese Eigenschaft, um ihren Status zu deaktivieren, nachdem Sie auf die Schaltfläche Checkout geklickt haben.

Methode: RegisterFormScope

$scope.formsValid = false;

Wenn

aufgerufen wird, werden eine registerFormScope und eine eindeutige Anweisungs -ID, die in der Instanziierung der Anweisung erstellt wurde, an sie übergeben. Diese Methode fügt dann den Formularbereich an das übergeordnete FormController hinzu. FormController

Methode: validatechildform

Diese Methode wird verwendet, um mit dem Backend -Server zu koordinieren, der die Überprüfung durchführt. Es wird aufgerufen, wenn der Benutzer den Inhalt bearbeitet und zusätzliche Überprüfung benötigt. Konzeptionell erlauben wir keine Anweisungen, eine externe Kommunikation durchzuführen.

Bitte beachten Sie, dass ich für die Zwecke dieses Tutorials die Backend -Komponenten weggelassen habe. Stattdessen lehne ich Versprechen ab oder analyse, basierend darauf, ob der vom Benutzer eingegebene Betrag in einem bestimmten Bereich liegt (Produkt A ist 10-50 und das Produkt B 25-500).

$scope.registerFormScope = function (form, id) {
  $scope.parentForm['childForm'+id] = form;
};

Die Verwendung des

-Dienstes ermöglicht die Anweisungen, Schnittstellen mit Erfolgs- und Misserfolgsstatus einzuhalten. Die Art der Anwendungsschnittstelle zwischen "Bearbeiten" und "Speichern" hängt von der Bearbeitung der Modelldaten ab. Es ist zu beachten, dass die Modelldaten sofort aktualisiert werden, wenn der Benutzer mit dem Eingeben beginnt. $q

Methode: Checkout

Klicken Sie auf "Checkout", um anzuzeigen, dass der Benutzer die Bearbeitung abgeschlossen hat und den Auschecken abgeschlossen hat. Dieses umsetzbare Element erfordert die Überprüfung, ob alle in der Anweisung geladenen Formulare validiert werden, bevor die Modelldaten an den Server gesendet werden können. Der Umfang dieses Artikels enthält keine Methoden zum Senden von Daten an einen Server. Ich ermutige Sie, den

-Dienst für alle Kunden-Server-Kommunikation zu untersuchen. $http

$scope.validateChildForm = function (form, data, product) {
  // 重置表单，使其不再有效
  $scope.formsValid = false;
  var deferred = $q.defer();

  // 验证表单和数据的逻辑
  // 必须在promise上返回resolve()或reject()。
  $timeout(function () {
    if (angular.isUndefined(data.amount)) {
      return deferred.reject(['amount']);
    }

    if ((data.amount < product.minAmount) || (data.amount > product.maxAmount)) {
      return deferred.reject(['amount']);
    }

    deferred.resolve();
  });
  return deferred.promise;
}

Diese Methode verwendet die Fähigkeit von Angular, und Kinderformen können die übergeordnete Form ungültig machen. Die übergeordnete Form heißt

, um seine Beziehung zur Kinderform klar zu veranschaulichen. Wenn das untergeordnete Formular seine parentForm -Methode verwendet, wird automatisch zum übergeordneten Formular angewachsen, um die Gültigkeit dort festzulegen. Alle Formen in $setValidity müssen gültig sein, und ihre internen parentForm -attribute müssen wahr sein. $valid

Erstellen Sie unsere Anweisung

Unsere Anweisungen müssen einer gemeinsamen Schnittstelle folgen, die eine vollständige Interoperabilität und Skalierbarkeit ermöglicht. Der Name unserer Richtlinien hängt von dem Produkt ab, das sie enthalten.

finden Sie hier einen Überblick über den Anweisungscode (Produkt A) und hier (Produkt B).

Umfang der Isolationsanweisung

Jede instanziierte Richtlinie erhält einen isolierten Bereich, der in der Richtlinie lokalisiert ist und keine externen Eigenschaften bekannt ist. AngularJS ermöglicht jedoch die Erstellung von Richtlinien, die übergeordnete Bereiche und Eigenschaften verwenden. Wenn Sie externe Eigenschaften an den lokalen Bereich übergeben, können Sie angeben, dass Sie eine Zwei-Wege-Datenbindung einrichten möchten.

Für unsere Anwendung sind einige externe Zwei-Wege-Datenbindungsmethoden und Eigenschaften erforderlich:

$scope.checkout = function () {
  if($scope.parentForm.$valid) {
    // 连接服务器以发布数据
  }
  $scope.formsValid = $scope.parentForm.$valid;
};

Methode: RegisterFormScope

Die erste Eigenschaft in der örtlichen Richtlinie ist die Methode zur Registrierung des lokalen Bereichs. Die Anweisung erfordert eine Pipeline, um das lokale

Objekt an den Hauptcontroller zu übergeben. FormController

Objekt: GiftData

Dies sind die zentralisierten Modelldaten, die in der Anweisungsansicht verwendet werden. Diese Informationen sind bidirektionale Datenbindung, um sicherzustellen, dass sich die in FormController auftretenden Aktualisierungen an den Hauptcontroller ausbreiten.

Methode: validatechildform

Diese Methode entspricht der im Controller definierten Methode. Diese Methode wird aufgerufen, wenn der Benutzer Informationen in der Anweisungsansicht aktualisiert.

Objekt: Produkt

Dieses Objekt enthält Informationen zum gekauften Produkt. Unsere Demonstration verwendet ein relativ kleines Objekt mit nur wenigen Eigenschaften. Die reale Anwendung meines Teams enthält viele Informationen, um Entscheidungen in der Bewerbung zu treffen. Es wird in validateChildForm übergeben, um den Kontext des überprüfenden Inhalts bereitzustellen.

Anleitungsverbindung

Unsere Anweisung verwendet die Funktion postLink und übergibt ihr ein Zielfernrohr. Darüber hinaus akzeptiert die postLink -Funktion auch mehrere andere Parameter. Sie sind wie folgt:

1. scope - Wird verwendet, um auf das für jede Direktive -Instanz erstellte Isolationsumfang zuzugreifen.
2. iElement - Wird verwendet, um auf Elementelemente zuzugreifen. Es ist sicher, das Element aus der postLink -Funktion innerhalb des Elements zu aktualisieren und zu ändern.
3. iAttrs - Wird verwendet, um auf Eigenschaften auf demselben Tag der Instanzialdirektive zuzugreifen.
4. controller - Wenn eine externe Controller -Abhängigkeit besteht, kann sie in einer Verbindungsfunktion verwendet werden. Diese müssen dem Attribut require des Anweisungsobjekts entsprechen.
5. transcludeFn - Diese Funktion entspricht der im Parameter $transclude des Befehlsobjekts aufgeführten Funktion.

link verantwortlich für das Anbringen aller DOM -Hörer und das Aktualisieren des DOM mit Ansichtselementen.

<input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span>

Registerformularsumfang

$scope.formsValid = false;

Wraping -Methode registerFormScope In $timeout verzögert die Ausführung bis zum Ende des Ausführungsstapels. Dies bietet dem Compiler genügend Zeit, um alle erforderlichen Verbindungen zwischen dem Controller und den Anweisungen zu vervollständigen. scope.form.fields ist ein Array, der Name der in FormController gefundenen Eigenschaft, die für die Einrichtung serverseitiger Überprüfungsfehler sehr wichtig ist. Der Zweck von registerFormScope besteht darin, FormController an den übergeordneten Controller zu senden, sodass das neu erstellte Formular auf eine untergeordnete Form von parentForm festgelegt werden kann.

Wenn sich die Überprüfungsinformationen ändert

$scope.registerFormScope = function (form, id) {
  $scope.parentForm['childForm'+id] = form;
};

Wenn sich das Formular ändert und der Benutzer bereit ist, es zu überprüfen, wird die saveForm -Methode in der Anweisung aufgerufen. Diese Methode ruft die Methode des Controllers in der validateChildForm -Methode in FormController, scope.giftData und scope.product auf. Der Controller gibt ein Versprechen zurück, das gemäß anderen Validierungsregeln analysiert oder abgelehnt wird.

Wenn Versprechen abgelehnt wird, gibt der Controller ein ungültiges Feld zurück. Dies wird verwendet, um das Formular (und parentForm) ungültig zu machen und andere Fehler auf Feldebene festzulegen. In unserer Demo verwenden wir einfache Nachbereitungen im Bereich amount und geben die Ursache des Scheiterns nicht zurück. Ablehnungen von validateChildForm können so komplex oder einfach sein wie Ihre Anwendung.

Wenn Promise erfolgreich zurückkehrt, muss der Befehl die Gültigkeit der Felder in der Form festlegen. Der Code muss auch alle zuvor identifizierten Serverfehler löschen. Dies stellt sicher, dass die Richtlinie dem Benutzer keine Fehler falsch liefert. Das Festlegen aller Felder mit $setValidity wird mit parentForm im Controller verknüpft, um ihre Gültigkeit festzulegen, sofern alle Unterformen gültig sind.

Stellen Sie unsere Ansicht

fest

Die Ansicht ist nicht sehr kompliziert, und für unsere Demonstration haben wir das Produkt auf die folgenden Felder vereinfacht: Name und Betrag. Im nächsten Schritt werden wir die Ansichten untersuchen, die Sie für die Ausführung dieser Anwendung benötigen.

finden Sie hier einen Überblick über den Ansichtscode (Produkt A) und hier (Produkt B).

Routenansicht

<input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span>

Diese Ansicht ist wichtig, da sie das übergeordnete Formular einstellt, mit dem alle aus der Produktrichtlinie geladenen untergeordneten Formulare eingepackt werden. Durch die Verwendung von ng-repeat in ng-if stellt sicher, dass das DOM nicht falsch mit einem ungenutzten FormController gefüllt ist.

Anweisungsansicht

$scope.formsValid = false;

Hinweis: Die obige Ansicht zum Demo -Layout wurde an einigen Stellen abgeschnitten und hat nichts mit diesem Artikel zu tun.

Das obige amountInput legt einen Überprüfungsmodus fest, der durch Angular's ngPattern Validator erzwungen wird. Das obige Feld verwendet die von Angular erstellte ngDisabled -Richtlinie, die den Ausdruck bewertet, und falls wahr, wird das Feld deaktiviert.

Am Ende der Ansicht zeigen wir alle Fehler an, um dem Benutzer Feedback zu geben, wenn der Benutzer auf die Schaltfläche "Speichern" klickt. Dadurch wird die Eigenschaft $submitted auf der Unterform festgelegt.

Zusammenfassung

Stellen Sie alle Teile zusammen und wir haben Folgendes: (Codepen -Link oder Code -Snippet sollte hier eingefügt werden)

Sie können auch den gesamten Code auf GitHub finden.

Schlussfolgerung

Mein Team hat beim Erstellen unserer neuesten Apps viel gelernt. Das Verständnis der Beziehung zwischen Vater Sohn ermöglicht es uns, unseren Kommentarbildschirm zu vereinfachen. Durch die Verwendung von Anweisungen können wir ein Formular entwickeln, das in jedem Kontext verwendet werden kann und einen guten wiederverwendbaren Code fördert. Mit der Richtlinie können wir auch den Code einstellen, um sicherzustellen, dass unser Formular wie erwartet funktioniert. Unsere Bewerbung ist in der Produktion und hat zu über 100.000 Bestellungen beigetragen.

Ich hoffe, Sie haben es genossen, diesen Artikel zu lesen. Wenn Sie Fragen oder Kommentare haben, würde ich sie gerne in den Kommentaren unten hören.

FAQ für formbasierte Anweisungen in AngularJS

Welche Rolle spielt formbasierte Richtlinien in AngularJs?

formbasierte Anweisungen in AngularJs spielen eine entscheidende Rolle bei der Verwaltung und Validierung der Benutzereingaben in Formularen. Sie bieten eine Möglichkeit, benutzerdefinierte HTML -Tags zu erstellen, die als neue benutzerdefinierte Widgets fungieren. Sie können DOMs auch so manipulieren, dass wir unseren Anwendungen Funktionen verleihen. Diese Anweisungen sind besonders nützlich, wenn Sie gemeinsame Funktionen in Ihrer Anwendung zusammenfassen und wiederverwenden möchten.

Wie erstelle ich benutzerdefinierte formbasierte Richtlinien in AngularJs?

Erstellen einer benutzerdefinierten formbasierten Anweisung in AngularJS beinhaltet die Definition einer neuen Direktive mithilfe der Funktion .directive. Sie müssen Ihre Richtlinie mit einem Namen und einer Fabrikfunktion angeben, die das Optionsobjekt der Richtlinie generiert. Dieses Objekt kann mehrere Eigenschaften definieren, einschließlich restrict, template, scope, link usw. Die Option restrict wird verwendet, um anzugeben, wie Anweisungen in HTML aufgerufen werden.

Wie verifiziere Sie die Formeingabe mithilfe der AngularJS -Direktive?

AngularJS enthält einige integrierte Anweisungen zur Formvalidierung, einschließlich ng-required, ng-pattern, ng-minlength, ng-maxlength und mehr. Diese Anweisungen geben Ihrer Formulareingabe eine Validierung und stellen sicher, dass die Eingabe der Benutzer bestimmte Kriterien erfüllt, bevor das Formular eingereicht wird. Sie können auch benutzerdefinierte Überprüfungsrichtlinien für komplexere Überprüfungsanforderungen erstellen.

Was ist der Zweck von FormController in AngularJs?

FormController In AngularJS bietet Methoden zum Verfolgen des Status von Formularen und deren Steuerelementen, Überprüfung der Gültigkeit und Zurücksetzen von Formularen. Es ist automatisch in der Formularanweisung verfügbar und kann in den Controller, andere Richtlinien oder Dienste injiziert werden.

Wie kann man die NG-Submit-Direktive in AngularJs verwenden?

Mit der

-Richtlinie in AngularJS können Sie beim Einreichen eines Formulars benutzerdefiniertes Verhalten angeben. Anstatt JavaScript -Code zu schreiben, um das Einreichungsereignis des Formulars mit ng-submit zu verarbeiten. Dies ist besonders nützlich, wenn das Verhalten des Standardformulars einreicht, wenn das Formular ungültig ist. ng-submit

Was ist der Unterschied zwischen Form und NG-Form in AngularJs?

Der Hauptunterschied zwischen

und

in form in ng-form besteht darin, dass ng-form in anderen Formen verschachtelt werden kann. Auf diese Weise können Sie relevante Eingänge gruppieren und als Unterform validieren. Andererseits unterstützt die Standard -Anweisungen nicht die Verschachtelung. form

Wie kann man die Gültigkeit eines Formfelds in AngularJs festlegen?

Sie können die Gültigkeit von Formularfeldern in AngularJs unter Verwendung der durch

bereitgestellten ngModelController -Methode festlegen. Diese Methode akzeptiert zwei Parameter: den Validierungsschlüssel und den Booleschen Wert. Wenn der boolesche Wert falsch ist, wird der Schlüssel zum $setValidity -Fiele des Feldes hinzugefügt. $error

Wie kann man die NG-Model-Richtlinie in AngularJS-Form verwenden?

Die ng-model -Richtlinie in AngularJs bindet Eingang, Auswahl, Textbereich oder benutzerdefinierte Formularsteuerung für Eigenschaften im Bereich. Es bietet eine Zwei-Wege-Datenbindung zwischen dem Modell und der Ansicht. Dies bedeutet, dass Änderungen am Eingangsfeld automatisch das Modell aktualisieren und umgekehrt.

Welche Rolle spielt die NG-Change-Richtlinie in AngularJS-Form?

Mit der

-Richtlinie in AngularJS können Sie ein benutzerdefiniertes Verhalten angeben, wenn der Benutzer die Eingabe ändert. Diese Richtlinie ist nützlich, wenn Sie etwas unmittelbar nach dem Tippen oder einer Auswahl ausführen möchten, anstatt darauf zu warten, dass das Formular eingereicht wird. ng-change

Wie erstelle ich benutzerdefinierte Verifizierungsrichtlinien in AngularJs?

Erstellen einer benutzerdefinierten Überprüfungsrichtlinie in AngularJS beinhaltet die Definition einer neuen Richtlinie, die

benötigt. In der Funktion ngModel der Anweisung können Sie die Pipeline link oder ngModelController verwenden, um eine benutzerdefinierte Validierungslogik hinzuzufügen. $validators

Das obige ist der detaillierte Inhalt vonSo erstellen Sie formbasierte Richtlinien in AngularJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!