Angular 的表單屬性 $valid, $invalid, $pristine, $dirty
Angular 提供了有關表單的屬性來幫助我們驗證表單. 他們給我們提供了各種有關一個表單及其輸入的信息,並且應用到了表單和輸入.
屬性類 | 描述 | |
$valid | ng-valid | Boolean 告訴我們這一項當前基於你設定的規則是否驗證通過 |
$invalid | ng-invalid | Boolean 告訴我們這一項當前基於你設定的規則是否驗證未通過 |
$pristine | ng-pristine | Boolean 如果表單或者輸入框沒有使用則爲True |
$dirty | ng-dirty | Boolean 如果表單或者輸入框有使用到則爲True |
Angular 也提供了有關表單及其輸入框的類,以便你能夠依據每一個狀態設置其樣式.
1.確保form上標籤有一個name屬性,像下面的例子一樣。最好再加一個novalidate=”novalidate”
2.form中不能有action屬性。提交交由ng-submit處理
3.每個input一定要有ng-model,最好有一個name方便引用。然後用require或者ng-minlength之類才起作用
<form name="form" novalidate="novalidate">
<label name="email">Your email</label>
<input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>
ng默認提供了驗證
驗證是否已輸入文字,只需在標籤上加上required:
<input type="text" ng-model="user.name" required />
驗證至少輸入{number}個字符,使用指令ng-minlength=“{number}”:
<input type="text" ng-model="user.name" ng-minlength="5" />
驗證至多輸入{number}個字符,使用指令ng-maxlength=“{number}”:
<input type="text" ng-model="user.name" ng-maxlength="20" />
確保輸入匹配一個正則表達式,使用指令ng-pattern="/PATTERN/":
<input type="text" ng-model="user.name" ng-pattern="/a-zA-Z/" />
驗證輸入是一個Email,設置input的type屬性爲email:
<input type="email" name="email" ng-model="user.email" />
驗證輸入是一個數字,設置input的type屬性爲number:
<input type="number" name="number" ng-model="user.age" />
驗證輸入是一個URL,設置input的type屬性爲url
<input type="url" name="homepage" ng-model="user.weburl" />
驗證規則
Angular 有很多驗證規則,像是 tong-min leng than dng-max length.
Angular還可以自己配置規則. Angular輸入指引上有說明 .
<input
ng-model="{ string }"
name="{ string }"
required
ng-required="{ boolean }"
ng-minlength="{ number }"
ng-maxlength="{ number }"
ng-pattern="{ string }"
ng-change="{ string }">
</input>
禁用提交按鈕 ng-disabled現在真正的好戲上演了。我們開始使用Angular的屬性 。首先讓我們禁用我們的提交按鈕。如果我們的表單是$invalid的,我們只想禁用它。
只使用一點代碼(ng-disabled),如果我們的表單是$invalid的,表單按鈕將被禁用。
|