How to patch form array in typed angular reactive forms

I am trying to figure out how to patch form array in a typed reactive Angular form. patchValue and setValue does not work in my mind consistently with FormControl for example. Here is a form

this.form = fb.group<IPersonForm>({
name: new FormControl<string | null>('bob'),
phones: new FormArray<FormGroup<IPhoneForm>>([]),
});


I can patch name control easily enough:

this.form.controls.name.patchValue('Jim', { onlySelf: true, emitEvent: false });


But form array is a challenge. Say I create a replacemenmt array

const myPhone = this.fb.group<IPhoneForm>({
phone: new FormControl<string | null | undefined>('bob')
});
const array = new FormArray<FormGroup<IPhoneForm>>([myPhone]);


Now if I try to patch (or set), neither compiles:

//this.form.controls.phones.setValue(array);
//this.form.controls.phones.setValue(array.controls);
//this.form.controls.phones.patchValue(array);
//this.form.controls.phones.patchValue(array.controls);


I can use setControl, but that method does not have an option for onlySelf:

this.form.setControl('phones', array, { emitEvent: false });


I feel like onlySelf is needed there because if I am replacing the data and have complex validations, I do not want them to run on any control until entire form is patched. Thank you!

Here is a stackblitz with a demo: https://stackblitz.com/edit/angular-path-typed-array?file=src/main.ts

Continue reading...