Form AngularJS

Formulir AngularJS menyediakan pengikat data dan validasi kontrol input.

Kontrol input

Kontrol input adalah elemen HTML input:

• Elemen input
• Elemen select
• Elemen tombol
• Elemen textarea

Pengikat data

Kontrol input melalui Instruktur mendefinisikan kontroler aplikasi. Instruksi menyediakan pengikat data.

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

Sekarang, aplikasi ini memiliki nama firstname Atribut.

Instruktur mendefinisikan kontroler aplikasi. Instruksi mengikat kontrol input ke bagian lain dari aplikasi.

Atribut firstnameDapat diacu di kontroler:

Contoh

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

</script>

Juga dapat diacu di tempat lain di aplikasi:

Contoh

<form>
  Nama: <input type="text" ng-model="firstname">
</form>
<h1>Anda memasukkan: {{firstname}}</h1>

</script>

Tombol centang

Nilai tombol centang adalah true atau falseMenyatakan Instruktur mendefinisikan kontroler aplikasi. Instruksi terapkan pada tombol centang dan menggunakan nilai yang ada di aplikasi Anda.

Contoh

Jika tombol centang dipilih, judul akan ditampilkan:

<form>
  Pilih untuk menampilkan judul:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Judul saya</h1>

</script>

Tombol pilihan

Dengan menggunakan Instruktur mendefinisikan kontroler aplikasi. Instruksi akan mengikat tombol pilihan ke aplikasi Anda.

Memiliki yang sama Instruktur mendefinisikan kontroler aplikasi. Pilihan tunggal dapat memiliki nilai yang berbeda, tetapi hanya akan digunakan nilai yang dipilih.

Contoh

Tampilkan beberapa teks berdasarkan nilai tombol pilihan yang dipilih:

<form>
  Pilih sebuah topik:
  <input type="radio" ng-model="myVar" value="dogs">Anjing
  <input type="radio" ng-model="myVar" value="tuts">Tutorial
  <input type="radio" ng-model="myVar" value="cars">Mobil
</form>

</script>

nilai myVar akan menjadi anjing、tutorials atau kereta。

kotak pilihan

Dengan menggunakan Instruktur mendefinisikan kontroler aplikasi. Instruksi akan mengikat kotak pilihan ke aplikasi Anda.

Instruktur mendefinisikan kontroler aplikasi. Atribut yang didefinisikan di properti akan memiliki nilai yang dipilih di kotak pilihan.

Contoh

Tampilkan beberapa teks berdasarkan nilai opsi yang dipilih:

<form>
  Pilih topik:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Anjing
    <option value="tuts">Tutorial
    <option value="cars">Kereta
  </select>
</form>

</script>

nilai myVar akan menjadi anjing、tutorials atau kereta。

Contoh Formulir AngularJS

aplikasi kode

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    名字：<br>
    <input type="text" ng-model="user.firstName"><br>
    姓氏：<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="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>

Coba Sendiri novalidate

Atribut ini adalah atribut baru di HTML5. Itu mematikan semua verifikasi bawaan browser.

Contoh Dijelaskan ng-app

Instruktur mendefinisikan aplikasi AngularJS. ng-controller

Instruktur mendefinisikan kontroler aplikasi. ng-model

Instruktur mengikat dua elemen input ke objek user dalam model. formCtrl master Kontrol untuk reset() Metode.

reset() Metode mengatur nilai awal objek, dan mendefinisikan user Objek diatur untuk sama dengan master Objek.

ng-click Instruktur hanya dipanggil saat tombol diklik reset() Metode.

Aplikasi ini tidak memerlukan atribut novalidate, tetapi biasanya Anda akan menggunakannya di form AngularJS untuk menimpa verifikasi standar HTML5.