Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I get the value of a nested formBuilder group

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

like image 447
Xenohs Avatar asked Dec 02 '16 14:12

Xenohs


People also ask

How do I get FormControl values?

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.

What is FormBuilder group?

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.


1 Answers

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.

like image 111
Xenohs Avatar answered Oct 10 '22 01:10

Xenohs