表单验证错误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有了认识，毕竟当时写的时候直接写的，也不知道是干啥的。