Formularze w angularjs dostarcza danych wiążące i sprawdzania poprawności formantów wejściowych.
Kontrole wstępne
Kontrole wstępne są elementy wejściowe HTML:
- elementy wejściowe
- wybierz elementy
- elementy przycisk
- elementy textarea
Wiązania danych
Kontrole wstępne zapewnia wiązania danych przy użyciu ng-model dyrektywy.
<input type="text" ng-model="firstname">
Aplikacja ma teraz mają właściwość o nazwie firstname .
ng-model Dyrektywa wiąże kontroler wejścia do reszty aplikacji.
Nieruchomość firstname , mogą być określone w kontrolerze:
Przykład
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> Spróbuj sam " Może być również określone w innym miejscu aplikacji:
Przykład
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Spróbuj sam " pole wyboru
Pole wyboru ma wartość true lub false . Zastosuj ng-model dyrektywę do wyboru i użyć jej wartość w aplikacji.
Przykład
Pokaż nagłówek, jeśli pole jest zaznaczone:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Spróbuj sam " radiobuttons
Bind przyciski radiowe do aplikacji z ng-model dyrektywy.
Przyciski radiowe o tej samej ng-model może mieć różne wartości, ale tylko wybrany zostanie wykorzystana.
Przykład
Wyświetla tekst w oparciu o wartości wybranego przycisku radiowego:
<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>
Spróbuj sam " Wartość myVar będzie albo dogs , tuts lub cars .
Selectbox
Bind wybierz pola do aplikacji z ng-model dyrektywy.
Właściwość określona w ng-model atrybut będzie miał wartość wybranej opcji w selectbox.
Przykład
Wyświetla tekst, na podstawie wartości wybranej opcji:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Spróbuj sam " Wartość myVar będzie albo dogs , tuts lub cars .
Angularjs Formularz Przykład
Formularz = {{user}}
master = {{}} mistrz
kod aplikacji
<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>
Spróbuj sam "  | Atrybut novalidate nowego w HTML5. To wyłącza żadnej walidacji domyślną przeglądarką. |
|---|
Przykład Poradnik
Dyrektywa ng-app definiuje aplikację angularjs.
Dyrektywa definiuje ng kontroler kontroler aplikacji.
Dyrektywa ng model łączy dwa elementy wejściowe do obiektu użytkownika w modelu.
Sterownik formCtrl określa wartości początkowe do obiektu głównego i określa sposób zerowania ().
Metoda reset () ustawia obiekt użytkownika równą obiektu nadrzędnego.
Dyrektywa ng kliknięcie wywołuje metodę reset (), tylko wtedy, gdy przycisk zostanie kliknięty.
Atrybut novalidate nie jest potrzebny do tego wniosku, ale zwykle można go używać w angularjs formach, aby zastąpić standardową walidacji HTML5.