My nested form is currently formatted in this way:
this.form = this.formBuilder.group({
user: this.formBuilder.group({
id: ['', Validators.required],
name: ['', Validators.required],
phone: ['', Validators.required]
})
})
I would usually access the value like this:
let userID = this.Form.controls['id'].value;
let userName = this.Form.controls['name'].value;
let userPhone = this.Form.controls['phone'].value;
but because the formGroups are nested, I'm not sure how to access the nested values. I tried:
let userName = this.Form.controls['user'].name;
What's the correct syntax for accessing a form control value in a nested formGroup? Thanks
To fetch the value of a form control, we have to use value property on the instance of FormControl in our class. In the same way we can fetch the value in HTML template. city = new FormControl('Noida'); console. log(this.
The FormBuilder is the helper API to build forms in Angular. It provides shortcuts to create the instance of the FormControl , FormGroup or FormArray . It reduces the code required to write the complex forms.
I was able to access the value by doing the following:
let userName = this.Form.controls['user'].value.name;
or
let userName = this.Form.get(['user','name']).value;
Either one works.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With