Question

我已经创建了如下的反应形式

this.customerForm = this.fb.group({
      "name": ["", Validators.required],
      "email": "",
      "info": this.fb.group({
        "name": ["", Validators.required],
      })
    })

我添加了getter函数，用于获取如下所示的表单控件

get f() { return this.customerForm.controls }

我正在显示如下错误消息

<p *ngIf="f.name.errors?.required">Required</p>

但是我无法显示 info 错误消息。因为它在嵌套组中，所以我决定创建另一个getter来获取如下所示的信息表单控件

  get fi() { return this.customerForm.controls.info.controls }

但是它不起作用，我也找不到为什么它不起作用。有人可以帮助解决此问题吗？预先感谢。

Answer 1

在 formGroup 对象上，.errors 属性不包含任何内容，并且始终返回 null。在组级别，您只能判断它是有效还是无效。对于实际错误，您需要进入嵌套控件。

this.customerForm.get('info').valid  // would work 
this.customerForm.get('info').invalid  // would work
this.customerForm.get('info').errors // will return null even if the control are in error
this.customerForm.get('info.name').errors // would work

如何获取嵌套表单组控件

1 个答案: