如何正确处理自定义消息的错误？

Question

我编写了一个检查错误的函数，然后使用 ngIf 来显示（或不显示）自定义文本。这样：

// ts
handleError = (controlName: string, errorName: string) => {
    return this.form.controls[controlName].hasError(errorName);
}

// html
<mat-error *ngIf="handleError('tipo', 'required')">Campo obbligatorio</mat-error>

它非常适合“一级”表单组。但是嵌套表单组又如何呢？例如：

this.form = this.fb.group({
    field1: [data.field1, [Validators.required]],
    myObj: this.fb.group({
        field2: [data.myObj.field2, [Validators.required]],
    })
});

这里似乎崩溃了（在控制台上说无法读取未定义的属性（读取'hasError'））。

迭代任何嵌套表单组并检查错误的最佳方法是什么？

Answer 1

使用 get 方法来检索控件，以便您可以传递点分隔值来访问嵌套形式控制。

组件.ts

handleError = (controlName: string, errorName: string) => {
    return this.form.get(controlName).hasError(errorName);
}

组件.html

<mat-error *ngIf="handleError('myObj.field2', 'required')">Campo obbligatorio</mat-error>