AngularJS Formulieren

AngularJS biedt data-binding en validatie voor invoercontroleurs in formulieren.

Invoercontroleur

De invoercontroleur is een HTML invoerelement:

• input-element
• select-element
• knop-element
• textarea-element

Data-binding

De invoercontroleur maakt gebruik van De directive definieert de toepassing controller. De instructie biedt data-binding.

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

Nu heeft de toepassing een genaamd Voornaam Eigenschappen.

De directive definieert de toepassing controller. De instructie bindt de invoercontroleur aan de rest van de applicatie.

Eigenschap VoornaamKan worden gerefereerd in de controller:

Voorbeeld

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
$scope.reset();
});

</script>

Het kan ook worden gerefdereerd op andere locaties in de applicatie:

Voorbeeld

<form>
  Naam: <input type="text" ng-model="firstname">
</form>
<h1>U heeft ingevoerd: {{firstname}}</h1>

</script>

Keuzevak

De waarde van het keuzevak is true of falseDeze De directive definieert de toepassing controller. De instructie wordt toegepast op het keuzevak en gebruikt zijn waarde in uw applicatie.

Voorbeeld

Als het keuzevak is geselecteerd, wordt de titel getoond:

<form>
  Selecteer om de titel te tonen:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Mijn titel</h1>

</script>

Keuzevak

Gebruik De directive definieert de toepassing controller. De instructie bindt het keuzevak aan uw applicatie.

Met dezelfde De directive definieert de toepassing controller. Het keuzevak kan verschillende waarden hebben, maar alleen de geselecteerde waarde wordt gebruikt.

Voorbeeld

Toon tekst op basis van de waarde van het geselecteerde keuzevak:

<form>
  Kies een onderwerp:
  <input type="radio" ng-model="myVar" value="dogs">Honden
  <input type="radio" ng-model="myVar" value="tuts">Tutorials
  <input type="radio" ng-model="myVar" value="cars">Autos
</form>

</script>

De waarde van myVar zal zijn dogs,tuts of cars.

Keuzelijst

Gebruik De directive definieert de toepassing controller. De instructie bindt de keuzelijst aan uw applicatie.

De directive definieert de toepassing controller. Eigenschappen die zijn gedefinieerd in de instructie zullen de waarde van het geselecteerde optie in het keuzelijst hebben.

Voorbeeld

Toon tekst op basis van de geselecteerde waarde van het optie

<form>
  Selecteer een onderwerp:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dieren
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

</script>

De waarde van myVar zal zijn dogs,tuts of cars.

AngularJS formuliervoorbeeld

Applicatiecode

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    Naam:
    <input type="text" ng-model="user.firstName"><br>
    Achternaam:
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="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 = {firstName: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  ;
  $scope.reset();
$scope.reset();
});

</script>

Probeer het zelf novalidate

Het attribuut is een nieuwe HTML5-attribuut. Het schakelt elke standaard browservalidatie uit.

Voorbeeld Uitleg ng-app

De directive definieert de AngularJS toepassing. ng-controller

De directive definieert de toepassing controller. ng-model

De directive bindt twee invoerelementen aan het object user in het model. formCtrl master De controller als reset() Methoden.

reset() De methode stelt het object in op de initiële waarde en definieert user Het object wordt ingesteld op gelijk aan master Objecten.

ng-click De directive wordt alleen aangeroepen bij het klikken op de knop reset() Methoden.

Deze applicatie vereist geen novalidate-eigenschap, maar u gebruikt het meestal in AngularJS-formulieren om de standaard HTML5-validatie te overschrijven.