角形式 - 访问模板中的嵌套控件

Question

我的表单中有一个嵌套控件组,我想访问它们的表单状态值(如pristine和valid)以动态显示验证错误.

这是动态构建的

controlMap['password'] = this.password;
controlMap['customData'] = this.formBuilder.group(customDataControlMap);
this.form = new FormGroup(controlMap)

来自obj就像

{
  controls:{
    password:{} 
    --->nested 
    customData:{
       controls:{
          customerId:{}
       }
    }
  }
}

模板中的ngClass看起来很难看

[ngClass]="( !form.controls.customData.controls.customerId.valid && !form.controls.customData.controls.customerId.touched && submitted) ? 'invalid' : ''"

当我尝试构建它时,它将无法工作(ng build --prod)

错误在ng:///Users/hanche/Desktop/Development/selfbits/beratergruppe-leistungen-webclient/src/app/pages/clients/client-new/client-new.component.html(6,61):属性y "AbstractControl"类型中不存在"controls".

Answer 1

试试这个

form.get('customData').get('customerId')?.invalid

要么

form.get('customData.customerId')

有没有办法避免模板中的函数调用？

使用getter

class YourComponent {
  get dataCustomerId() {
    return this.form.get('customData.customerId');
  }
}

模板:

[ngClass]="dataCustomerId?.invalid"

角形式 - 访问模板中的嵌套控件