角型 - テンプレート内のネストされたコントロールにアクセスする

Question

フォームの中にネストされたコントロールグループがあり、検証エラーを動的に表示するためにフォーム状態値（初期状態と有効な状態）にアクセスします。

ザ・は動的OBJから、それは非常に醜いテンプレートに

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

ngClassのようなものです。この

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

のように構築され

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

と動作しません。私がそれを構築しようとするときに（ng build --prod）

NGで

ERROR：///Users/hanche/Desktop/Development/selfbits/beratergruppe-leistungen-webclient/src/app/pages/clients/client-new/client-new.component.html （ 6,61）：プロパティy 'controls'は 'AbstractControl'型には存在しません。

Answer 1

テンプレートでの関数呼び出しを回避する方法がある。この

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

または

form.get('customData.customerId') 

を試してみてください？

ゲッター使っ

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

テンプレート：何 `form.get（ 'customData.customerId'）`について

[ngClass]="dataCustomerId?.invalid" 

angular forms - accessing nested controls in template