angular表單驗證

1、添加form標簽

1、頁面中添加form標簽，並為form標簽添加一個指令 #form=”ngForm”（#后的表單名稱是自定義的，這里是為在表單提交的時候，按鈕禁用做准備）

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

2、form標簽內input輸入框的屬性

2.1、給form標簽下所有input標簽添加name屬性，不然控制台會報錯，報錯信息是讓添加name屬性或者是添加[ngModelOptions]=”{standalone : true}”
2.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、添加校驗信息

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

3.2、往 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.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、禁用按鈕

4.1、通過定義的表單名稱.form.valid的反值來禁用提交按鈕，如果輸入的內容都有效，這個值為true，按鈕才可以點擊。

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

4.2、在form標簽中直接提交表單，用（ngSubmit）來處理表單提交事件。

5、小結

完整代碼如下：

<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>