时间戳

首页 > 解决方案 > 如何获取嵌套表单组控件

angular - 如何获取嵌套表单组控件

问题描述

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

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>

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

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

但它不起作用，我也找不到它不起作用的原因。任何人都可以帮助解决这个问题吗？提前致谢。

标签： angularangular-reactive-forms

解决方案

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

推荐阅读