表單驗證錯誤Cannot read property 'pattern' of null

前言

做業系統再次迎來了上線，剛開始測就出現了問題：

而後就找報錯的地方而後解決。

錯誤

多虧了宇軒相助，找到了報錯的地方：

<div class="row-1 mt-1" *ngIf="loginForm.invalid && (loginForm.get('username').dirty || loginForm.get('username').touched)">
            <p class="text-danger" *ngIf="loginForm.get('username').errors.pattern">
              <i class="fa fa-exclamation-triangle"></i>學號格式不正確</p>
            <p class="text-danger" *ngIf="loginForm.get('username').errors.required">
              <i class="fa fa-exclamation-triangle"></i>學號不能爲空</p>
          </div>

由於沒有錯，因此會報錯，因此我人都傻了，看以前添加學生的驗證：

<div class="row mt-2" *ngIf="no.invalid && (no.dirty || no.touched)">
                <div class="col-md-8 offset-md-4">
                    <small class="text-danger" *ngIf="no.errors.required">
                        <i class="fa fa-exclamation-triangle"></i>
                        學生學號必須
                    </small>
                  <small class="text-danger" *ngIf="no.errors.pattern">
                    <i class="fa fa-exclamation-triangle"></i>
                    學生學號格式錯誤
                  </small>
                </div>
            </div>

不一樣的只是最上面的<div>裏面放的內容不同而已
把新增學生的驗證信息和報錯信息在V層展現出來：

{{no.invalid && (no.dirty || no.touched)}}
{{no.errors|json }}

一開始即便有錯誤也不會顯示，由於驗證是false，後來沒有錯誤也不會報錯，由於驗證也是false

將登陸的驗證和報錯信息在V層展現：

{{loginForm.invalid && (loginForm.get('username').dirty || loginForm.get('username').touched)}}
 {{loginForm.get('username').errors |json}}

由於沒錯，因此會報錯。。。

解決

經過對比發現是一部分的驗證寫錯了loginForm.get('username').invalid -> loginForm.invalid：
修正後：

<div class="row-1 mt-1" *ngIf="loginForm.get('username').invalid && (loginForm.get('username').dirty || loginForm.get('username').touched)">
            <p class="text-danger" *ngIf="loginForm.get('username').errors.pattern">
              <i class="fa fa-exclamation-triangle"></i>學號格式不正確</p>
            <p class="text-danger" *ngIf="loginForm.get('username').errors.required">
              <i class="fa fa-exclamation-triangle"></i>學號不能爲空</p>
          </div>

看一下invalid的介紹：

/**
     * A control is `invalid` when its `status` is `INVALID`.
     * @see {@link AbstractControl.status}
     * @returns True if this control has failed one or more of its validation checks,
    若是此控件的一個或多個驗證檢查失敗，則爲True
     * false otherwise.
     */
    readonly invalid: boolean;

再次展示一下驗證信息：

{{loginForm.invalid}}
{{loginForm.get('username').invalid}}

對於loginForm來講，密碼未驗證，因此loginForm.invalid爲true，可是對於loginForm.get('username')來講，驗證經過，因此loginForm.get('username').invalid爲false，error爲null，而後就出現了報錯。

總結

在驗證時要看清要驗證的位置，分析清邏輯，不然真的挺耽誤時間的，也感謝此次錯誤讓我對invalid有了認識，畢竟當時寫的時候直接寫的，也不知道是幹啥的。