反应形式 angular 在 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>

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

Answer 1

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

为了克服这个问题：您需要将 errors 替换为 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>

反应形式 angular 在 angular 中显示模式错误

Reactive forms angular show error for pattern in angular

angular

angular-reactive-forms

angular-custom-validators