AngularJs 表单

简单的表单

ngModel指令实现了双向的数据绑定，即模型和视图双向同步，同时它也为其他指令提供了API来扩展ngModel的行为。

<div ng-controller="ExampleController">  
  <form novalidate class="simple-form">  
    Name: <input type="text" ng-model="user.name" /><br />  
    E-mail: <input type="email" ng-model="user.email" /><br />  
    Gender: <input type="radio" ng-model="user.gender" value="male" />male  
    <input type="radio" ng-model="user.gender" value="female" />female<br />  
    <input type="button" ng-click="reset()" value="Reset" />  
    <input type="submit" ng-click="update(user)" value="Save" />  
  </form>  
  <pre>form = {{user | json}}</pre>  
  <pre>master = {{master | json}}</pre>  
</div>  
  
<script>  
  angular.module('formExample', [])  
    .controller('ExampleController', ['$scope', function($scope) {  
      $scope.master = {};  
  
      $scope.update = function(user) {  
        $scope.master = angular.copy(user);  
      };  
  
      $scope.reset = function() {  
        $scope.user = angular.copy($scope.master);  
      };  
  
      $scope.reset();  
    }]);  
</script>

novalidate表明没有添加任何校验逻辑，在表单组定义了各种输入控件绑定到模型user的不同属性，当用户输入是会看到form信息不停的更新，点击“Save”按钮会把当前表单的值保存到master变量中，master信息会相应的更新，点击"Reset"信息会重置表单的信息，即把之前保存的快照master赋值给user. 这里通过angular.copy函数做了深拷贝。

表单css样式

- ng-valid: 数据合法时的CSS样式

- ng-invalid: 数据不合法时的CSS样式

- ng-valid-[key]: 通过$setValidity指定的key合法时生效的样式

- ng-invalid-[key]: 通过$setValidity指定的key不合法时生效的样式

- ng-pristine: 未曾与表单控件交互时的样式

扫描二维码关注公众号，回复： 283765 查看本文章

- ng-dirty: 与控件发生了交互后生效的样式

- ng-touched: 控件失去焦点的样式

- ng-untouched: 控件没有失去焦点时的样式

- ng-pending: 等待异步校验过程中的(in-progress)生效的样式

通过上述样式体现出来，user的name和email属性对应的控件加上了required属性, 当用户未输入name和email信息时会标红提示。

定制触发器更新模型

表单的每次输入都会触发与模型的同步和表单的校验。我们可以通过ngModelOptions指令改变模型同步和表单验证的触发条件。例如ng-model-options="{ updateOn: 'blur' }"，会使Angular在输入控件失去焦点时更新模型或者进行校验。多个事件通过空白隔开，例如:

ng-model-options="{ updateOn: 'mousedown blur' }". 如果保持默认触.发条件并添加新的触发事件，加上“default”选项，

例如：ng-model-options="{ updateOn: 'default blur' }".

<div ng-controller="ExampleController">  
  <form>  
    Name:  
    <input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" /><br />  
    Other data:  
    <input type="text" ng-model="user.data" /><br />  
  </form>  
  <pre>username = "{{user.name}}"</pre>  
  <pre>userdata = "{{user.data}}"</pre>  
</div>

angular.module('customTriggerExample', [])  
.controller('ExampleController', ['$scope', function($scope) {  
  $scope.user = {};  
}]);

猜你喜欢