# AngularJS 表單
AngularJS 表單是輸入控件的集合。
## HTML 控件
以下 HTML input 元素被稱為 HTML 控件:
* input 元素
* select 元素
* button 元素
* textarea 元素
## HTML 表單
HTML 表單通常與 HTML 控件同時存在。
## AngularJS 表單實例
```
<script>function ExampleController($scope) { $scope.master = {"firstName":"John","lastName":"Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); };</script>
<form novalidate="" class="ng-pristine ng-valid">First Name:
<input type="text" ng-model="user.firstName" class="ng-pristine ng-valid">
Last Name:
<input type="text" ng-model="user.lastName" class="ng-pristine ng-valid">
<button ng-click="reset()">RESET</button></form>
form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}
```
## 應用程序代碼
```
<div ng-app="" ng-controller="formController">
? <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>
function formController ($scope) {
??? $scope.master = {firstName: "John", lastName: "Doe"};
??? $scope.reset = function() {
??????? $scope.user = angular.copy($scope.master);
??? };
??? $scope.reset();
};
</script>
```
> 
> HTML 屬性 **novalidate** 用于禁用瀏覽器的默認驗證。
## 實例解析
AngularJS **ng-model** 指令用于綁定 input 元素到模型中。
模型對象 **master** 的值為 {"firstName" : "John", "lastName" : "Doe"}。
模型函數 **reset** 設置了模型對象 **user** 等于 master。
