AngularJS Formlar

AngularJS'teki formlar, girdi kontrolü veri bağlaması ve doğrulamayı sağlar.

girdi kontrolü

girdi kontrolü, HTML girdi bileşenidir:

• girdi bileşeni
• select bileşeni
• düğme bileşeni
• textarea bileşeni

veri bağlaması

girdi kontrolü, veri bağlaması kullanarak ng-model komut veri bağlaması sağlar.

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

Şimdi, uygulama adı firstname özniteliği.

ng-model komut, girdi kontrolörünü uygulamanın geri kalanına bağlar.

öznitelik firstnamekontrolörde atıfta bulunabilir:

Örnek

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

Kişisel olarak deneyin

Uygulamanın diğer yerlerinde de atıfta bulunabilir:

Örnek

<form>
  İsim: <input type="text" ng-model="firstname">
</form>
<h1>Adınızı girdiniz: {{firstname}}</h1>

Kişisel olarak deneyin

çekme kutusu

çekme kutusunun değeri true veya false。 ng-model komut, çekme kutusuna uygulanır ve uygulamanızda değerini kullanır.

Örnek

Çekme kutusu işaretlendiğinde başlık gösterilir:

<form>
  Başlığı göstermek için işaretleyin:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Benim başlık</h1>

Kişisel olarak deneyin

tek seçenek düğmesi

Kullanarak ng-model komut, tek seçenek düğmesini uygulamanıza bağlar.

aynı ng-model tek seçenek düğmesinin farklı değerleri olabilir, ancak sadece seçilen değeri kullanır.

Örnek

Seçilen tek seçenek düğmesinin değerine göre bazı metinler gösterir:

<form>
  Bir konu seçin:
  <input type="radio" ng-model="myVar" value="dogs">Köpekler
  <input type="radio" ng-model="myVar" value="tuts">Eğitimler
  <input type="radio" ng-model="myVar" value="cars">Araçlar
</form>

Kişisel olarak deneyin

myVar değerinin olacağı dogsvetuts veya cars。

aşağıdaki seçim kutusu

Kullanarak ng-model Düzenleyici, aşağıdaki seçim kutusunu uygulamanıza bağlar.

ng-model Öznitelikte tanımlanan özellikler, seçim kutusundaki seçeneklerin değerine sahip olacaktır.

Örnek

Seçilen seçenek değerine göre bazı metinleri gösterin:

<form>
  Bir konu seçin:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

Kişisel olarak deneyin

myVar değerinin olacağı dogsvetuts veya cars。

AngularJS 表单示例

应用程序代码

<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();
});
</script>

Kişisel olarak deneyin

novalidate Özellik HTML5'teki yeni bir özelliktir. Herhangi bir varsayılan tarayıcı doğrulamasını devre dışı bırakır.

Örnek Açıklanmıştır

ng-app düzenleyici, AngularJS uygulamasını tanımlar.

ng-controller düzenleyici, uygulama kontrolörünü tanımlar.

ng-model düzenleyici, iki giriş elementini modeldeki user nesnesine bağlar.

formCtrl kontrolör master kontrolörü tanımlar reset() Yöntem.

reset() metot nesneyi başlangıç değeri ayarlar ve user nesne, eşittir master Nesne.

ng-click Düzenleyici yalnızca düğmeye tıkladığınızda çağrılır reset() Yöntem.

Bu uygulama novalidate özelliğini gerektirmez, ancak genellikle AngularJS formunda standart HTML5 doğrulamayı geçersiz kılmak için kullanılır.