Angularjs中input的指令和属性

建议添加 novalidate属性（可无值）到form标签上，这样可以保证在表单不合法的情况下阻止浏览器继续提交数据。

可以给表单元素 input 添加 required 属性（可无值），让该表单成为必填项，如：

<form action="" name="formName" novalidate ng-controller="test">
  <input type="text" name="name" ng-model="use.name" required>
</form>

Angularjs中表单最常用的就是用 ng-model 属性进行双向绑定了。用 ng-model 绑定数据后，可以时时的和数据进行交互。

 

使用 ng-model 属性进行绑定的表单，会自动的添加一些 class 样式，如：

非必填表单

初始化时会添加 .ng-pristine 和 .ng-valid 两个class样式。当表单为非空时 class 样式会变成 .ng-valid 和 .ng-dirty 。其中将 .ng-pristine 变成了 .ng-dirty 。

 

必填表单

初始化时会添加 .ng-pristine 、.ng-invalid 和 .ng-invalid-required 三个class样式。当表单为非空时 class 样式会变成 .ng-dirty 、.ng-valid 和 .ng-valid-required 。

以上 class 样式还只是针对默认的input（即type=text的input），像那些特殊意义的 input ，如：type=email、type=number等。其 class 样式的种类会更多。

 

Angular input最小长度

<input type="text" ng-minlength="5" />

Angular input最大长度

<input type="text" ng-maxlength="5" />

Angular表单匹配正则表达式

<input type="text" ng-pattern="/a-zA-z" />

 

AngularJS通过DOM元素上设置一个表单，从而使我们可以很容易的获取到当前 $scope 对象的属性。

判断表单未修改

<form action="" name="formName" novalidate ng-controller="test">
  <input type="text" name="name" ng-model="use.name" required> <input type="button" value="查看" ng-click="fn(formName.name.$pristine);">
</form>
<script>
function test($scope){
  $scope.fn = function(o){
    alert(o);
  }
}
</script>

运行以上代码，formName.name.$pristine 会返回一个布尔值。

因为 formName 是当前域（test）中 $scope 对象的属性，所以我们也可以用如下方法来获取 $pristine 值，以查看值是否有改变。如:

<form action="" name="formName" novalidate ng-controller="test">
  <input type="text" name="name" ng-model="use.name" required> <input type="button" value="查看" ng-click="fn();">
</form>
<script>
function test($scope){
  $scope.fn = function(){
    alert($scope.formName.name.$pristine);
  }
}
</script>

如下一些属性与 $pristine 属性类似，如 $dirty、$valid等。

判断表单修改过 $dirty 属性。

判断表单合法 $valid 属性。

判断表单非法 $invalid 属性。

 

判断表单错误 $error 属性。如果某个验证失败，则这个属性返回true,相反如果这个属性为false,则代表验证通过。

$error 属性是一个非常有用的属性，如：

<form action="" name="testemail" novalidate ng-controller="testemail">
  <input type="email" name="email" ng-model="us.email" required> <input type="button" value="打印" ng-click="printemail()">
</form>
<script>
function testemail($scope){
  $scope.printemail = function(){
    alert($scope.testemail.email.$error);
  }
}
</script>

如果 $error 是获取 type=email 的属性，则会返回这样一个对象：Object {required: true, email: false} ，其中返回的对象包含一个 required 和 email 属性。如果是获取 type=number 的属性则对象包含的属性则是 required 和 number 。