Patch Value for nested fb.group and fb.array - Reactive Forms

Question

I have the following Reactive form:

this.cvForm = this._fb.group({
  sector: ['', [Validators.required]],
  background: ['', [Validators.required]],
  experience: this._fb.group({
    field0: ['', [Validators.required]],
    field1: ['', [Validators.required]],
    field2: ['', [Validators.required]],
    field3: ['', [Validators.required]],
    field4: [''],
    field5: ['']
  }),
  skills: this._fb.array([]),
  iconOne: ['', [Validators.required]],
  iconTwo: ['', [Validators.required]],
  iconThree: ['', [Validators.required]],
  iconFour: ['', [Validators.required]],
  otherSkills: ['', [Validators.required]]
});
}

I am retrieving the values to "patched" from the DB and using below to patchValue :

 onCVRetrieved(cv: ICV): void {
   if (this.cvForm) {
     this.cvForm.reset();
  }

  this.cv = cv; // this contains the values returned from the DB

  this.cvForm.patchValue({

  sector: this.cv.sector,
  background: this.cv.background,
  experience: this._fb.group({
    field0: ['', [Validators.required]],
    field1: ['', [Validators.required]],
    field2: ['', [Validators.required]],
    field3: ['', [Validators.required]],
    field4: [''],
    field5: ['']
  }),
  skills: this._fb.array([]),
  iconOne: this.cv.iconOne,
  iconTwo: this.cv.iconTwo,
  iconThree: this.cv.iconThree,
  iconFour:this.cv.iconFour

})

}

The issue:

I am struggling to patchValue for the nested fb.group and fb.array :

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

skills: this._fb.array([])

Any idea how I can patchValue for the above 2 instances?

Update:

The nested fb.group worked:

 this.cvForm.controls['experience'].patchValue({
  field0: this.cv.experience['field0'],
  field1: this.cv.experience['field1'],
  field2: this.cv.experience['field2'],
  field3: this.cv.experience['field3'],
  field4: this.cv.experience['field4'],
  field5: this.cv.experience['field5']
});

Issue with fb.array:

The structure of the array data from server is like this:

skills: ["something", "something else", "another thing", "one more thing"]

On the front end I have massive list of skills where are checkboxes. I want to auto check the values in front-end that have been returned from the DB. So for example: If the DB returns array of skills which includes "singing" . The singing should be checked on the front end.

What I have tried:

 const formArray = new FormArray([]);

 const skills: [String] = this.cv.skills;
 skills.forEach(item => formArray.push(new FormControl('')));

this.cvForm.patchValue({

  sector: this.cv.sector,
  background: this.cv.background,
  skills: formArray.patchValue(skills),
  iconOne: this.cv.iconOne,
  iconTwo: this.cv.iconTwo,
  iconThree: this.cv.iconThree,
  iconFour: this.cv.iconFour

});

Front-end:

Please note that the list of all possible checkboxes is fetched from the DB.

<div class="uk-margin">
    <div *ngFor="let skill of allSkills">
      <input type="checkbox"> {{skill}}<br>
  </div>
</div>

Answer 1

FormArray has to have exactly as many controls as there are items in the array that is going to be set as its value. For example, if you have this array:

const arr = [1,2,3];

And this FormArray :

const formArray = new FormArray([]); // equivalent to fb.array([])\

You may want to do something like this:

arr.forEach(item => formArray.push(new FormControl('')));

And only then:

formArray.patchValue(arr);

As to FormGroup , it already has the necessary structure and can be easily patched:

const formGroup = fb.group({
    name: [''],
    lastName: ['']
});
formGroup.patchValue({
   name: 'Foo',
   lastName: 'Bar'
});

And about your code: it seems you do not patch a valid value in your code. Look, the object you pass to the patchValue method contains fields like

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

and

skills: this._fb.array([]),

Those are not the values you want to assign to the form, those are new declarations of a FormGroup and FormArray .