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

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方法获取控件，这样您就可以传递点分隔值来访问嵌套的表单控件。

component.ts

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

component.html

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

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

How to properly handle errors for custom message?

error-handling

nested

angular

formgroups