Formulare în AngularJS furnizează date cu caracter obligatoriu și validarea comenzilor de intrare.
Controale de intrare
Controalele de intrare sunt elementele de intrare HTML:
- elemente de intrare
- selectați elemente
- elemente de buton
- elemente textarea
Data-Binding
Controlul intrărilor furnizează date de legare prin utilizarea ng-model de directivă.
<input type="text" ng-model="firstname">
Cererea are acum o proprietate numită firstname .
ng-model directivă se leagă controlerul de intrare pentru restul aplicației.
Proprietatea firstname , poate fi menționată într - un controler:
Exemplu
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> Încearcă - l singur » Acesta poate fi, de asemenea, menționată în altă parte în cerere:
Exemplu
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Încearcă - l singur » Caseta de bifat
O casetă de selectare are valoarea true sau false . Aplicați ng-model directivă la o casetă de selectare, și de a folosi valoarea pe în cererea dumneavoastră.
Exemplu
Arată antetul dacă este bifată caseta de selectare:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Încearcă - l singur » butoane radio
Butoane radio Legați aplicația cu ng-model de directivă.
Butoanele radio cu același ng-model poate avea valori diferite, dar numai cel selectat va fi utilizat.
Exemplu
Afișează un text, în funcție de valoarea butonului radio selectat:
<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>
Încearcă - l singur » Valoarea myVar va fi fie dogs , tuts , sau cars .
Selectbox
Legați selectați casetele la cererea dumneavoastră cu ng-model de directivă.
Proprietatea definită în ng-model atribut va avea valoarea de opțiunea selectată în selectbox.
Exemplu
Afișează un text, în funcție de valoarea opțiunii selectate:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Încearcă - l singur » Valoarea myVar va fi fie dogs , tuts , sau cars .
Un formular AngularJS Exemplu
formează = {{user}}
maestru = {{maestru}}
Codul de aplicare
<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>
Încearcă - l singur » novalidate atribut este nou în HTML5. Acesta dezactivează orice browser prestabilit de validare.
exemplu explicat
Directiva privind ng-app definește aplicația AngularJS.
Directiva privind ng-controller definește controlerul de aplicație.
Directiva privind ng model se leagă două elemente de intrare la obiect utilizator în model.
Controlerul formCtrl setează valorile inițiale la obiectul principal, și definește reset() metoda.
reset() Metoda setează obiectul utilizator egal cu obiectul principal.
Directiva ng-clic invocă reset() metoda, numai în cazul în care butonul este apăsat.
novalidate atribut nu este necesar pentru această aplicație, dar în mod normal , pe care îl va folosi în forme AngularJS, pentru a trece peste validarea HTML5 standard de .