How to get and set value in nested form fields in angular2?

Question

I am working on angular2 application and using angular reactive forms. How to get value of innermost element and set its value.

form : FormGroup;

constructor(private formBuilder: FormBuilder)
{
   this.form = formBuilder.group({
      'home_cleaning' : [{
           cities : FormBuilder.array([])
       }]
   });
}

setValue()
{
    let cities_array = [1,2,3,4];
    this.form.controls['home_cleaning']['cities'].setValue(cities_array);
}

getValue()
{
   console.log(this.form.controls['home_cleaning']['cities'].value);
}

Getting error in console : Cannot read property 'setValue/value' of undefined.

May be you have a typo in setVlaue --> setValue

Korotkikh Mikhail
– Korotkikh Mikhail

2017-07-18 12:12:06 +00:00
Commented Jul 18, 2017 at 12:12 — Korotkikh Mikhail
– Korotkikh Mikhail, Commented Jul 18, 2017 at 12:12

Yordan Nikolov · Accepted Answer · 2017-07-18 13:02:04Z

8

If you want to populate your form with data, you have to patch it

this.form.patchValue(dataObject);

or

this.form.patchValue({
   'home_cleaning': { cities: 'value' }
});

With patchValue, you can assign values to specific controls in a FormGroup by supplying an object of key/value pairs for just the controls of interest.

you can merge the object

this.form.patchValue(Object.assign(this.form.value, youNewDataObject)));

or

this.form.patchValue(dataObj, {selfOnly: true });

edited Jul 18, 2017 at 13:02

answered Jul 18, 2017 at 12:43

Yordan Nikolov

2,67815 silver badges17 bronze badges

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

1 Comment

Lakhvir Singh Over a year ago

I have implemented this but getting one problem that if I have more then one field in home_cleaning field then patch value will over write all fields.

Prathmesh Dali · Accepted Answer · 2017-07-27 15:00:12Z

8

Try this answer

form: FormGroup;

constructor(private formBuilder: FormBuilder) {
    this.form = formBuilder.group({
      'home_cleaning': formBuilder.group({
        cities: [] //if you want to set values as normal array if you want to create FormArray use new FormArray([]) and push formCotrols in this array.
      })
    });
}

setValue() {
    let cities_array = [1, 2, 3, 4];
    this.form.get(['home_cleaning','cities']).setValue(cities_array);
}

getValue() {
    console.log(this.form.get(['home_cleaning','cities']).value);
}

answered Jul 27, 2017 at 15:00

Prathmesh Dali

2,3601 gold badge20 silver badges21 bronze badges

Comments

tal faran · Accepted Answer · 2022-03-22 10:32:50Z

3

Had the same issue, solved it like this :

this.newEmployeeForm = new FormGroup({

controls..............

and nested Form:
      PersonalAdress : new FormGroup({
            StreetName: new FormControl(null),
            StreetNumber: new FormControl(null),
            ZipCode : new FormControl(null),
            Region: new FormControl(null)

 })
})

So I just use a Path like I would use inside my HTML code:

 this.newEmployeeForm.get('PersonalAdress.StreetName').setValue(data);

Like this you can set even the deepest nesting form elements, as long as you provide the right path.

Note that I give the get method a string.

edited Mar 22, 2022 at 10:32

answered Aug 26, 2018 at 11:23

tal faran

1271 gold badge2 silver badges12 bronze badges

Comments

Ketan Akbari · Accepted Answer · 2017-07-18 12:36:15Z

0

Try this:

   setValue() {
    let cities_array = [1, 2, 3, 4];
    this.form = this.formBuilder.group({
        home_cleaning: this.formBuilder.array([
            [({
                cities: cities_array,

            })],
        ]),
    });
}

answered Jul 18, 2017 at 12:36

Ketan Akbari

11.3k5 gold badges36 silver badges52 bronze badges

Comments

AVJT82 · Accepted Answer · 2017-07-18 20:41:56Z

0

By comments it seems that you want to just push new values to your form Array, then let's just use map for that, and push new form controls:

setValue() {
  let cities_array = [1,2,3,4];
  let arr = this.form.get('home_cleaning.cities').controls;
  cities_array.map(city => arr.push(new FormControl(city)))
}

PS. Here I assume you have typo, and that home_cleaning is actually an nested form group.

And for getting the value, just do:

this.form.get('home_cleaning.cities').value

answered Jul 18, 2017 at 20:41

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Comments

Lakhvir Singh · Accepted Answer · 2018-09-11 06:42:26Z

    form : FormGroup;

    constructor(private formBuilder: FormBuilder)
    {
       this.form = this.formBuilder.group({
          'home_cleaning' : this.formBuilder.array([
             this.formBuilder.group({
                cities : this.formBuilder.array([])
             })
          ])
       });
    }

   setValue()
   {
      let cities_array = [1,2,3,4];
      (this.form.controls['home_cleaning'].value).forEach((value, key)=> {
         let citiesArray = <FormArray>(<FormArray>this.form.controls['home_cleaning']).controls[key].get('cities');
         for(let city of cities_array){
            citiesArray.push(new FormControl(city))
         }
      });
      this.getValue();
   }

   getValue()
   {
      (this.form.controls['home_cleaning'].value).forEach((value, key)=> {
         let citiesArray = <FormArray>(<FormArray>this.form.controls['home_cleaning']).controls[key].get('cities').value;
      });
   }

jkufrin · Accepted Answer · 2021-07-30 14:45:25Z

0

I was trying to do something similar and found this pattern worked well in the template:

<span class="label-error" *ngIf="(form.controls['parentControl'].controls['childControl'].invalid && attemptedSubmit)">Please select childControl.</span>

answered Jul 30, 2021 at 14:45

jkufrin

216 bronze badges

Collectives™ on Stack Overflow

How to get and set value in nested form fields in angular2?

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related