AngularJS -Formulare

AngularJS-Formulare sind Sammlungen von Eingabesteuerelementen.

HTML-Steuerelemente

Die folgenden HTML-Eingabeelemente werden als HTML-Steuerelemente bezeichnet:

  • input-Element
  • select-Element
  • button-Element
  • textarea-Element

Datenbindung

Eingabesteuerelemente verwenden die ng-model-Direktive, um Datenbindung zu erreichen.

<input type="text" ng-model="firstname">

Durch den obigen Code hat die Anwendung eine Eigenschaft namens firstname.

Sie ist mithilfe der ng-model-Direktive an Ihre Anwendung gebunden.

Die firstname-Eigenschaft kann im Controller verwendet werden:

Beispiel

var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.firstname = "John"; });

Selbst ausprobieren »

Sie kann auch an anderer Stelle in der Anwendung verwendet werden:

Beispiel

<Form> Vorname: <input type="text" ng-model="firstname"> </form> <h1>Sie haben eingegeben: {{firstname}}</h1>

Selbst ausprobieren »

Kontrollkästchen

Der Wert eines Kontrollkästchens ist true oder false. Es kann mithilfe der ng-model-Direktive gebunden werden, und sein Wert kann in der Anwendung verwendet werden:

Beispiel

Nachdem das Kontrollkästchen ausgewählt wurde, wird der Inhalt des h1-Tags angezeigt:

<Form> Ankreuzen, um eine Überschrift anzuzeigen: <input type="checkbox" ng-model="myVar"> </form> <h1 ng-show="myVar">Meine Überschrift</h1>

Selbst ausprobieren »

Optionsfelder

Wir können ng-model verwenden, um Optionsfelder an Ihre Anwendung zu binden.

Optionsfelder verwenden dasselbe ng-model und können unterschiedliche Werte haben, aber nur der Wert des ausgewählten Optionsfelds wird verwendet.

Beispiel

Informationen basierend auf dem ausgewählten Optionsfeld anzeigen:

<form>Wählen Sie eine Option:<input type="radio" ng-model="myVar" value="dogs">Hunde <input type="radio" ng-model="myVar" value="tuts">Tutorials <input type="radio" ng-model="myVar" value="cars">Autos </form>

Selbst ausprobieren »

Der Wert von myVar kann dogs, tuts oder cars sein.

Drop-down-Menüs

Sie können das Drop-down-Menü mithilfe der ng-model-Direktive an Ihre Anwendung binden.

Der Wert des ng-model-Attributs ist die Option, die Sie im Dropdown-Menü ausgewählt haben:

Beispiel

Informationen basierend auf der ausgewählten Dropdown-Menüoption anzeigen:

<form>Wählen Sie eine Option:<select ng-model="myVar"> <option value=""> <option value="dogs">Hunde <option value="tuts">Tutorials <option value="cars">Autos </select> </Form>

Selbst ausprobieren »

Der Wert von myVar kann dogs, tuts oder cars sein.

HTML-Formulare

HTML-Formulare existieren normalerweise zusammen mit HTML-Steuerelementen.

AngularJS-Formularbeispiel

Vorname:

Nachname:


form = {{user}}

master = {{master}}

Anwendungscode

<div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> Vorname:<br> <input type="text" ng-model="user.firstName"><br> Nachname:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">ZURÜCKSETZEN</button> </form> <p>form = {{user}}</p> <p>master = {{master}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.master = {firstName: "John", lastName: "Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }); </script>

Selbst ausprobieren »
Note novalidateDas Attribut ist neu in HTML5. Es deaktiviert die Standardvalidierung des Browsers.

Beispielerklärung

ng-appDie Direktive definiert die AngularJS-Anwendung.

ng-controllerDie Direktive definiert den Anwendungscontroller.

ng-modelDie Direktive bindet zwei Eingabeelemente an das user-Objekt des Modells.

formCtrlDie Funktion setztmasterauf den Anfangswert des Objekts und definiertreset()die Methode.

reset()Die Methode setztuserdas Objekt gleichmasterdem Objekt.

ng-clickDie Direktive ruftreset()die Methode auf, und sie wird aufgerufen, wenn auf die Schaltfläche geklickt wird.

Das Attribut novalidate ist in der Anwendung nicht erforderlich, aber Sie müssen es in AngularJS-Formularen verwenden, um die standardmäßige HTML5-Validierung zu überschreiben.

Andere Erweiterungen