Latest web development tutorials

AngularJS Form


AngularJS Formulareingabe steuert Sammlung.


HTML-Steuerelemente

Die folgenden HTML-Eingabeelemente sind HTML-Steuerelemente genannt:

  • Eingabeelement
  • wählen Sie Elemente
  • Button-Element
  • TextArea- Element

HTML-Formular

HTML-Steuerelemente und HTML-Formulare häufig koexistieren.


AngularJS Formularinstanz

Vorname:

Nachname:


form = {{user}}

master = {{Master}}


Der Anwendungscode

<Div ng-app = "myApp " ng-Controller = "formCtrl">
<Form novalidate>
Vorname: <br>
<Input type = "text" ng -Modell = "user.firstName"> <br>
Nachname: <br>
<Input type = "text" ng -Modell = "user.lastName">
Bei <br>
<Taste ng-Klick = "reset ()"> RESET </ button>
</ Form>
<P> form = {{{ user}} </ p>
<P> Master = {{{ Master}} </ p>
</ Div>

<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'formCtrl', function ($ scope) {
$ Scope.master = {vorname: "John", nachName: "Doe"};
$ Scope.reset = function () {
$ Scope.user = angular.copy ($ scope.master);
};
$ Scope.reset ();
});
</ Script>

Versuchen »
Note novalidate Attribut ist neu in HTML5 in. Deaktivieren Sie Standard-Authentifizierung verwendet den Browser.

Beispiele für analytische

ng-App - Richtlinie definiert AngularJS Anwendungen.

ng-Controller - Richtlinie definiert die Anwendungscontroller.

ng-Modell Richtlinie binden die beiden Eingabeelemente für den Benutzer - Objektmodell.

formCtrl Funktion setzt den Anfangswert des Master - Objekts und definiert die Reset () -Methode.

reset () Methode setzt das Benutzerobjekt mit dem Master - Objekt gleich sind.

ng-Klick - Befehl aufgerufen reset () Methode, und die Anruftaste geklickt wird.

novalidate Eigenschaft in der Anwendung ist nicht erforderlich, aber Sie müssen AngularJS Formular zu verwenden, für die Standard HTML5 Validierung neu zu schreiben.