Angular2 patchValue push value into array

Question

Is it It looks like Angular2's FormGroup.patchValue() doesn't push new elements into an array.

For example something like this:

ngOnInit() {

    this.form = this.formBuilder.group({
        animal: [''],
        school: this.formBuilder.group({
            name: [''],
        }),
        students: this.formBuilder.array([this.formBuilder.control('Bob')])
    });

    setTimeout(() => this.form.patchValue({
      animal: 'cat'
      school : {name: 'Fraser'},
      students: ['Bob gets edited', 'This will not show']
    }), 250);

}

Will only update the first element in "students" but it will not insert the second element.

What would I need to do to make it display both elements?

Plunker here.

Answer 1

Well, as silentsod said, it is not possible. Currently, I am using below as an alternative:

        let controlArray = <FormArray>this.form.controls['apps'];           
        this.list.forEach(app => {
                    const fb = this.buildGroup();
                    fb.patchValue(app);
                    controlArray.push(fb);
            });

Angular Team - We need a new function something like PatchArray() that would patch from a collection/object graph. It is a basic use case.

Answer 2

.patchValue() only updates the existing FormArray, it won't modify the structure of your form model.

patchValue(value: any[], {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void Patches the value of the FormArray. It accepts an array that matches the structure of the control, and will do its best to match the values to the correct controls in the group.

It accepts both super-sets and sub-sets of the array without throwing an error.

You actually need to push a new element onto the array in order for it to appear.

 this.form.controls['students'].push(new FormControl('This will not show'));

This is all in the FormArray documentation https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html

Answer 3

Well, the solution I found out is:

this.myForm.controls['array'] = this.formBuilder.array(newArray.map(i => this.formBuilder.group(i)));

Answer 4

I hope this will help you. I have a complex object where my object has an object inside and object inside. sorry for my grammar. but i hope my code will help you

ngOnInit() {
    this.descriptifForm = this._fb.group({
      name: 'ad',
      descriptifs: this._fb.array([ this.buildForm() ]),
    });

    this._service.getData().subscribe(res => {
      this.descriptifForm.setControl('descriptifs', this._fb.array(res || []));
    });

  }
buildA(): FormGroup {
    return this._fb.group({
      Id: '',
      Groups: this._fb.array([ this.buildB() ]),
      Title: ''
    });
  }

  buildB(): FormGroup {
    return this._fb.group({
      Id: '',
      Fields: this._fb.array([ this.bbuildC() ]),
      Type: ''
    });
  }

  buildC(): FormGroup {
    return this._fb.group({
      Answers: this._fb.array([ this.buildD() ]),
      Code: '',
    });
  }

  buildD(): FormGroup {
    return this._fb.group({
      Data: ''
    });
  }