AngularJS-formulieren
Formulieren in AngularJS bieden gegevensbinding en validatie van invoerbesturingselementen.
Invoerbedieningen
Invoerbesturingselementen zijn de HTML-invoerelementen:
- invoerelementen
- selecteer elementen
- knop elementen
- tekstgebied elementen
Dataverbinding
Invoercontroles bieden gegevensbinding door gebruik te maken van de
ng-modelrichtlijn.
<input type="text" ng-model="firstname">
De applicatie heeft nu een eigenschap met de naam firstname.
De ng-modelrichtlijn bindt de invoercontroller aan de rest van uw toepassing.
De eigenschap firstname, kan worden aangeduid in een controller:
Voorbeeld
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script>
Er kan ook elders in de aanvraag naar worden verwezen:
Voorbeeld
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Selectievakje
Een selectievakje heeft de waarde trueof false. Pas de
ng-modelrichtlijn toe op een selectievakje en gebruik de waarde ervan in uw toepassing.
Voorbeeld
Toon de kop als het selectievakje is aangevinkt:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Radio knoppen
Bind keuzerondjes aan uw applicatie met de ng-model
richtlijn.
Keuzerondjes met hetzelfde ng-modelkunnen verschillende waarden hebben, maar alleen de geselecteerde wordt gebruikt.
Voorbeeld
Geef wat tekst weer, gebaseerd op de waarde van het geselecteerde keuzerondje:
<form>
Pick a topic:
<input type="radio" ng-model="myVar"
value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
De waarde van myVar is dogs, tuts, of
cars.
Selectbox
Bind select boxes aan uw applicatie met de ng-model
richtlijn.
De eigenschap die in het ng-modelattribuut is gedefinieerd, heeft de waarde van de geselecteerde optie in de selectbox.
Voorbeeld
Geef wat tekst weer, gebaseerd op de waarde van de geselecteerde optie:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
De waarde van myVar is dogs, tuts, of
cars.
Een AngularJS-formuliervoorbeeld
form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}
Toepassingscode:
<div ng-app="myApp" ng-controller="formCtrl">
<form
novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last
Name:<br>
<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: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user
= angular.copy($scope.master);
};
$scope.reset();
});
</script>
Het novalidate attribuut is nieuw in HTML5. Het schakelt elke standaard browservalidatie uit.
Voorbeeld uitgelegd
De ng-app- richtlijn definieert de AngularJS-toepassing.
De ng-controller- richtlijn definieert de applicatiecontroller.
De richtlijn ng-model bindt twee invoerelementen aan het gebruikersobject in het model.
De formCtrl- controller stelt beginwaarden in op het hoofdobject en definieert de methode reset() .
De methode reset() stelt het gebruikersobject gelijk aan het hoofdobject .
De instructie ng-click roept de methode reset() op, alleen als op de knop wordt geklikt.
Het novalidate-attribuut is niet nodig voor deze toepassing, maar normaal gesproken gebruikt u het in AngularJS-formulieren om de standaard HTML5-validatie te overschrijven.