Form AngularJS

Hình thức trong AngularJS cung cấp gắn kết dữ liệu và xác thực cho điều khiển đầu vào.

Điều khiển đầu vào

Điều khiển đầu vào là các phần tử đầu vào HTML:

• Thẻ input
• Thẻ select
• Thẻ button
• Thẻ textarea

Gắn kết dữ liệu

Điều khiển đầu vào thông qua việc sử dụng ng-model Hướng dẫn cung cấp dữ liệu gắn kết.

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

Hiện tại, ứng dụng có một tên firstname .

ng-model Hướng dẫn sẽ gắn điều khiển đầu vào với phần còn lại của ứng dụng.

Thuộc tính firstnameCó thể được tham chiếu trong điều khiển:

ví dụ

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

Thử ngay lập tức

Nó cũng có thể được tham chiếu ở các vị trí khác trong ứng dụng:

ví dụ

<form>
  Tên: <input type="text" ng-model="firstname">
</form>
<h1>Bạn đã nhập là: {{firstname}}</h1>

Thử ngay lập tức

Hộp kiểm

Giá trị của hộp kiểm là true hoặc falseĐể ng-model Hướng dẫn áp dụng cho hộp kiểm và sử dụng giá trị của nó trong ứng dụng của bạn.

ví dụ

Nếu chọn hộp kiểm, sẽ hiển thị tiêu đề:

<form>
  Chọn để hiển thị tiêu đề:
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Tiêu đề của tôi</h1>

Thử ngay lập tức

Nút chọn một

sử dụng ng-model Hướng dẫn sẽ gắn nút chọn một với ứng dụng của bạn.

Cùng ng-model Các nút chọn một có thể có nhiều giá trị khác nhau, nhưng chỉ sử dụng giá trị được chọn.

ví dụ

Hiển thị một số văn bản dựa trên giá trị của nút chọn một trong:

<form>
  Chọn một chủ đề:
  <input type="radio" ng-model="myVar" value="dogs">Chó
  <input type="radio" ng-model="myVar" value="tuts">Hướng dẫn
  <input type="radio" ng-model="myVar" value="cars">Xe
</form>

Thử ngay lập tức

giá trị của myVar sẽ là dogs、tuts hoặc cars。

hộp chọn

sử dụng ng-model Câu lệnh sẽ gắn hộp chọn xuống ứng dụng của bạn.

ng-model Thuộc tính được định nghĩa trong thuộc tính sẽ có giá trị của tùy chọn đã chọn trong hộp chọn.

ví dụ

Hiển thị một số văn bản dựa trên giá trị đã chọn:

<form>
  Chọn một chủ đề:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

Thử ngay lập tức

giá trị của myVar sẽ là dogs、tuts hoặc cars。

Mẫu biểu mẫu AngularJS

ứng dụng mã

<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>

Thử ngay lập tức

novalidate Thuộc tính là thuộc tính mới trong HTML5. Nó tắt bất kỳ xác thực mặc định của trình duyệt nào.

Giải thích ví dụ

ng-app Cú pháp định nghĩa ứng dụng AngularJS.

ng-controller Cú pháp định nghĩa bộ điều khiển ứng dụng.

ng-model Cú pháp gắn hai phần tử đầu vào vào đối tượng user trong mô hình.

formCtrl Ký tự điều khiển master Đối tượng đặt giá trị ban đầu và định nghĩa reset() Phương pháp.

reset() Phương pháp sẽ user Đối tượng được đặt bằng master Đối tượng.

ng-click Cú pháp chỉ được gọi khi nhấp vào nút reset() Phương pháp.

Ứng dụng này không cần thuộc tính novalidate, nhưng thường bạn sẽ sử dụng nó trong biểu mẫu AngularJS để thay thế xác thực tiêu chuẩn HTML5.