angular - 反应形式角度显示角度模式的错误

Question

我有这样的反应形式

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 的属性“模式” 是否有人在显示模式错误时遇到类似问题？

Answer 1

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

为了克服这个问题：您需要用错误替换错误吗？如下：

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

Answer 2

请试试这个::

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