angular表單驗證

一、添加form標籤

一、頁面中添加form標籤，併爲form標籤添加一個指令 #form=」ngForm」（#後的表單名稱是自定義的，這裏是爲在表單提交的時候，按鈕禁用作準備）

<form (ngSubmit)="btnHandle('login')" #loginForm="ngForm"></form>

二、form標籤內input輸入框的屬性

2.一、給form標籤下全部input標籤添加name屬性，否則控制檯會報錯，報錯信息是讓添加name屬性或者是添加[ngModelOptions]=」{standalone : true}」
2.二、使用[(ngModel)]雙向綁定數據，並經過#（須要驗證字段的名稱，這裏也是自定義的）=」ngModel」，來指向綁定的輸入框。添加須要校驗的正則表達式，pattern=」^1[3456789]\d{9}$」,若是是必填項，添加required屬性。

<input type="number" [(ngModel)]="loginData.telphone" pattern="^1[3456789]\d{9}$" placeholder="請輸入手機號" required #mobile="ngModel" name="loginData.telphone" />

三、添加校驗信息

3.一、經過 ngModel 跟蹤修改狀態與有效性驗證，在表單中使用 ngModel 能夠得到比僅使用雙向數據綁定更多的控制權。它還會告訴你不少信息：用戶碰過此控件嗎？它的值變化了嗎？數據變得無效了嗎？NgModel 指令不單單跟蹤狀態。它還使用特定的 Angular CSS 類來更新控件，以反映當前狀態。 能夠利用這些 CSS 類來修改控件的外觀，顯示或隱藏消息。

3.二、往 input標籤上添加名叫 spy 的臨時模板引用變量， 而後用這個 spy 來顯示它上面的全部 CSS 類。

 <div class="input_item">
      <p>手機號</p>
      <input type="number" [(ngModel)]="loginData.telphone" pattern="^1[3456789]\d{9}$" placeholder="請輸入手機號" required #mobile="ngModel" name="loginData.telphone" #spy />
 </div>
 <div>{{spy.className}}</div>

（1）未進行任何操做的時候

（2）輸入符合pattern格式的內容

3.三、經過檢查輸入內容的invalid、dirty、touched，來校驗數據的有效性

<div *ngIf="mobile.invalid && (mobile.dirty || mobile.touched)" class="dhl_error">
  <div *ngIf="mobile.errors.required">
      {{validator.validate.errorMsg.tel.empty}}
  </div>
  <div *ngIf="mobile.errors.pattern">
      {{validator.validate.errorMsg.tel.error}}
  </div>
</div>

這裏的校驗信息，在服務裏面定義了相應的錯誤提示語,能夠全局共享

四、禁用按鈕

4.一、經過定義的表單名稱.form.valid的反值來禁用提交按鈕，若是輸入的內容都有效，這個值爲true，按鈕才能夠點擊。

 <button [disabled]="!loginForm.form.valid" class="dhl_red_btn">登陸</button>

4.二、在form標籤中直接提交表單，用（ngSubmit）來處理表單提交事件。

五、小結

完整代碼以下：

<form (ngSubmit)="btnHandle('login')" #loginForm="ngForm">
     <div class="border_bottom">
        <div class="input_item">
           <p>手機號</p>
           <input type="number" [(ngModel)]="loginData.telphone" pattern="^1[3456789]\d{9}$" placeholder="請輸入手機號" required #mobile="ngModel" name="loginData.telphone" #spy />
        </div>
        <div class="fontmedium padding15 fontSize16">{{spy.className}}</div>
        <div *ngIf="mobile.invalid && (mobile.dirty || mobile.touched)" class="dhl_error">
           <div *ngIf="mobile.errors.required">
               {{validator.validate.errorMsg.tel.empty}}
            </div>
            <div *ngIf="mobile.errors.pattern">
               {{validator.validate.errorMsg.tel.error}}
            </div>
            </div>
        </div>
     <div class="button">
         <button [disabled]="!loginForm.form.valid" class="dhl_red_btn">登陸</button>
         <a routerLink="/register"><button class="register dhl_border_btn">註冊</button></a>
      </div>
</form>