Angular PatchValue for nested form array

Question

I have a reactive form with multiple nested form arrays. In my form i can have multiple segments with multiple sets, the problem is using patchValue() or setValue() to edit my form, when getting data from the database. I understand i need to create multiple form groups to patch the values, is there a way of dynamically creating the form to match the data received from the database?

ngOnInit() {
      this.myForm = this.fb.group({ 
        id: '', 
       name: '',
       userId: "",
       description:'',
       date: "",

      segments: this.fb.array([
         this.fb.group({
           id:'',
           workoutId:'',
           name:'',
           notes: '',
           exerciseName:'',

       sets: this.fb.array([
             this.fb.group({
               id:'',
               segmentId:'',
               name:'',
               reps:'',
               weight:'',
               type:'',
               success:'',
             }),
        ])
     })
   ])
 });
    this.workoutService.getWorkout(this.workoutId).subscribe(
      (Workout) => { this.workout = Workout, this.setValueForm()},
      (err) => console.log(err, "This did not load properlu make a toasty"),
    )

}

setValueForm() {
  this.myForm.patchValue(this.workout);  

}

Adrita Sharma · Accepted Answer · 2020-01-04 08:01:10Z

4

Try like this:

let segments = res.segments // value from db

const formArray = new FormArray([]);

segments.forEach(s => {
  formArray.push(this.fb.group({
    id: s.id,
    name: s.name
  }));
});


this.myForm.setControl('segments',formArray);

answered Jan 4, 2020 at 8:01

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

1 Comment

Charles Over a year ago

Would the same techbe valid if a contorll contained a nested form Array l

Collectives™ on Stack Overflow

Angular PatchValue for nested form array

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related