angular forms - accessing nested controls in template

Question

I have a nested control group inside my form and i want to access their form state value (like pristine and valid) to display validation errors dynamically.

The is dynamically built like this

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

the from obj is like

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

the ngClass in the template it looks quite ugly

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

and won't work in when i try to build it (ng build --prod)

ERROR in ng:///Users/hanche/Desktop/Development/selfbits/beratergruppe-leistungen-webclient/src/app/pages/clients/client-new/client-new.component.html (6,61): Propert y 'controls' does not exist on type 'AbstractControl'.

any plunked or html how the above hierarchy is composed? trying to achieve something similar, but the get(...) does not work as expected... — baHI
– baHI, Commented Mar 21, 2018 at 15:18

Community · Accepted Answer · 2017-05-23 12:25:54Z

10

try this

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

or

form.get('customData.customerId')

is there a way to avoid function calls in template?

using getter

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

template:

[ngClass]="dataCustomerId?.invalid"

angular forms - accessing nested controls in template

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Apr 21, 2017 at 1:24

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

developer033 Over a year ago

What about form.get('customData.customerId')? :)

Han Che Over a year ago

thanks that works, but is there a way to avoid function calls in template?

Tiep Phan Over a year ago

@HanChe you could create getter in your component

Collectives™ on Stack Overflow

angular forms - accessing nested controls in template

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related