I have a Reactive Form in my app and the structure is below:

this.bioForm = this._fb.group({
  firstName: [this.user.firstName, [Validators.required]],

  experience: this._fb.group({
    field0: ['', [Validators.required, Validators.maxLength(500)]],
    field1: ['', [Validators.required, Validators.maxLength(500)]],
    field2: ['', [Validators.required, Validators.maxLength(500)]],
    field3: ['', [Validators.required, Validators.maxLength(500)]],
    field4: ['', [Validators.maxLength(500)]],
    field5: ['', [Validators.maxLength(500)]]
  }),

  skills: this._fb.array([], Validators.required),
});

Within my browser local storage I have the following:

What I have tried:

 // Get Value from LOCAL STORAGE
 let localStorage_experience = JSON.parse(localStorage.getItem("experience")) || "";

 // Set nested form controls value
 this.bioForm.setValue({experience:{field0: localStorage_experience.field0 || ""}});

I am trying to retrieve value from my local storage and set them against my nested form controls values.

I have a Reactive Form in my app and the structure is below:

this.bioForm = this._fb.group({
  firstName: [this.user.firstName, [Validators.required]],

  experience: this._fb.group({
    field0: ['', [Validators.required, Validators.maxLength(500)]],
    field1: ['', [Validators.required, Validators.maxLength(500)]],
    field2: ['', [Validators.required, Validators.maxLength(500)]],
    field3: ['', [Validators.required, Validators.maxLength(500)]],
    field4: ['', [Validators.maxLength(500)]],
    field5: ['', [Validators.maxLength(500)]]
  }),

  skills: this._fb.array([], Validators.required),
});

Within my browser local storage I have the following:

What I have tried:

 // Get Value from LOCAL STORAGE
 let localStorage_experience = JSON.parse(localStorage.getItem("experience")) || "";

 // Set nested form controls value
 this.bioForm.setValue({experience:{field0: localStorage_experience.field0 || ""}});

I am trying to retrieve value from my local storage and set them against my nested form controls values.

• javascript
• angular
• typescript

• 1 please post more "context-orientated" code. This is not enough to see what's going wrong – messerbill Commented Feb 19, 2018 at 13:05
• Whats the reason for a down vote? Its a straight forward question. How do you set nested form control values within an angular ponent. Not sure how else to ask this. – Skywalker Commented Feb 19, 2018 at 13:15

1 Answer 1

You could use setControl that replaces an existing formcontrol/formgroup/formarray:

this.bioForm.setControl('experience', this._fb.group(localStorage_experience));

StackBlitz

or then you can use patchValue:

this.bioForm.patchValue({experience: localStorage_experience}); 

If you want to use setValue you need to apply it on the nested formgroup, as setValue expects all values to be set.

this.bioForm.controls.experience.setValue(localStorage_experience);