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 。