反应形式角度显示角度模式的错误答案

【问题标题】：Reactive forms angular show error for pattern in angular反应形式角度显示角度模式的错误
【发布时间】：2020-07-15 22:11:11
【问题描述】：

我有这样的反应形式

this.form = this.formBuilder.group({
      email: ['', [
        Validators.required,
        Validators.maxLength(120),
        Validators.pattern('^[^\\s@]+@[^\\s@]+\\.[^\\s@]{1,}$')
      ]],
    });

现在我需要为不同的错误显示错误，像这样

<div class="invalid-feedback" *ngIf="form.controls.email.errors.pattern">THIS EMAIL NOT VALID</div>

但我得到了错误 无法读取 null 的属性“模式” 有人在显示模式错误时遇到过类似的问题吗？

【问题讨论】：

标签： angular angular-reactive-forms angular-custom-validators

【解决方案1】：

您要么失败，要么通过验证。当你通过验证时form.controls.email.errors不存在。

要克服这个问题：您需要将 errors 替换为 errors?，如下所示：

<div class="invalid-feedback" *ngIf="form.controls.email.errors?.pattern">THIS EMAIL NOT VALID</div>

【讨论】：

ERROR TypeError: Cannot read property 'pattern' of null
上述解决方法你试过了吗？

【解决方案2】：

请试试这个 ::

<div class="invalid-feedback" *ngIf="form.get('email').hasError('pattern')">THIS EMAIL NOT VALID</div>

【讨论】：