Bentuk di AngularJS menyediakan data-mengikat dan validasi kontrol input.
Kontrol masukan
kontrol masukan adalah elemen masukan HTML:
- elemen masukan
- pilih elemen
- elemen tombol
- elemen textarea
Data-Binding
Masukan kontrol menyediakan data-mengikat dengan menggunakan ng-model direktif.
<input type="text" ng-model="firstname">
Aplikasi ini sekarang memiliki properti bernama firstname .
The ng-model direktif mengikat input controller untuk sisa aplikasi Anda.
Properti firstname , dapat disebut di controller:
Contoh
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> Cobalah sendiri " Hal ini juga dapat disebut tempat lain dalam aplikasi:
Contoh
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Cobalah sendiri " kotak centang
Sebuah kotak centang memiliki nilai true atau false . Terapkan ng-model direktif untuk kotak centang, dan menggunakan nilai itu dalam aplikasi Anda.
Contoh
Tampilkan header jika kotak centang dicentang:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Cobalah sendiri " radiobuttons
Tombol radio mengikat aplikasi Anda dengan ng-model direktif.
Tombol radio dengan sama ng-model dapat memiliki nilai yang berbeda, tetapi hanya satu yang dipilih akan digunakan.
Contoh
Menampilkan beberapa teks, berdasarkan nilai dari tombol radio yang dipilih:
<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>
Cobalah sendiri " Nilai myVar akan baik dogs , tuts , atau cars .
Selectbox
Mengikat pilih kotak untuk aplikasi Anda dengan ng-model direktif.
Properti didefinisikan dalam ng-model atribut akan memiliki nilai opsi yang dipilih di selectbox tersebut.
Contoh
Menampilkan beberapa teks, berdasarkan nilai dari opsi yang dipilih:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Cobalah sendiri " Nilai myVar akan baik dogs , tuts , atau cars .
Formulir Contoh AngularJS
Formulir = {{user}}
Master = {{Master}}
aplikasi Kode
<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>
Cobalah sendiri "  | Atribut novalidate baru di HTML5. Menonaktifkan setiap validasi browser default. |
|---|
misalnya Dijelaskan
The ng-aplikasi direktif mendefinisikan aplikasi AngularJS.
The ng-controller direktif mendefinisikan controller aplikasi.
The ng model direktif mengikat dua elemen input ke objek pengguna dalam model.
The formCtrl kontroler menetapkan nilai awal ke objek utama, dan mendefinisikan metode reset ().
Reset () metode menetapkan objek pengguna sama dengan objek utama.
The ng-klik direktif memanggil metode reset (), hanya jika tombol diklik.
Atribut novalidate tidak diperlukan untuk aplikasi ini, tetapi biasanya Anda akan menggunakannya dalam bentuk AngularJS, untuk menimpa standar validasi HTML5.