Formas reactivas: cómo agregar un nuevo FormGroup o FormArray a un FormGroup existente en un momento posterior en Angular 7

angular-reactive-forms formgroups

Question

En los otros ejemplos en StackOverflow hay muchas preguntas sobre el uso de FormGroups en FormArrays. Pero mi pregunta es lo contrario.

FormArrays tiene un método push, que hace que muchas cosas sean posibles. Los Grupos de Formas tienen un método addControl para agregar FormControls simples. Afaik FormGroups no tiene el método addFormArray or addFormGroup . Por eso necesito tu ayuda.

Situación siguiente:

this.myForm = this.fb.group({
id: this.fb.control([this.book.id]),
// or short form `id: [this.book.id],`
});

Agregar un control simple en un momento posterior es fácil:

this.myForm.addControl(''isbn'', this.fb.control(this.book.isbn));

Pero, ¿qué hay de agregar FormArrays y FormGroups en un FormGroup existente? Por ejemplo, me gustaría usar la siguiente matriz y objeto para este propósito:

const authors = [''George Michael'', ''Aretha Franklin''];
const metaData = { description : ''Great Book'', publication: 2019}

Me gustaría agregar authorArray o metaData solo si existen. Esa es la razón por la que quiero agregarlos más adelante.

ps Por favor, ignora las reglas de validación.

Answer 1

Simplemente puede pasar el FormArray lugar de un FormControl .

this.form.addControl(''arr'',this.fb.array([]));

Edición: Para utilizar el valor existente.

Para usar el valor de la matriz de authors , usa esto:

authors.forEach(author => {
(<FormArray>this.form.controls.arr).push(new FormControl(author));
});

O

this.myForm.addControl(''authors'', this.fb.array([''George Michael'', ''Aretha Franklin'']))

Answer 2

FormGroup método FormGroup addControl acepta AbstractControl como parámetro, que puede ser un FormControl o un FormArray u otro FormGroup ya que todos ellos extienden AbstractControl .

class FormGroup extends AbstractControl
...
class FormControl extends AbstractControl
...
class FormArray extends AbstractControl

FormBuilder puede ayudarlo a construir dichos controles con los métodos array() y group() :

this.myForm = this.fb.group({
id: this.fb.control([this.book.id]),
authors: this.fb.array([''George Michael'', ''Aretha Franklin'']),
metaData: this.fb.group({ description : ''Great Book'', publication: 2019})
});

Aún puede usar la fábrica después para construir los controles que necesita (sin importar qué tipo de control sea):

this.myForm.addControl(''authors'', this.fb.array([''George Michael'', ''Aretha Franklin'']))
this.myForm.addControl(''metaData'', this.fb.group({ description : ''Great Book'', publication: 2019}))