Реактивные формы: как добавить новую FormGroup или FormArray в существующую FormGroup в более поздний момент времени в Angular 7 - PullRequest
Новая
       50

Реактивные формы: как добавить новую FormGroup или FormArray в существующую FormGroup в более поздний момент времени в Angular 7

4 голосов
/ 25 марта 2019

В других примерах в StackOverflow есть много вопросов об использовании FormGroups в FormArrays. Но мой вопрос противоположен.

FormArrays имеет метод push, который делает возможными многие вещи. FormGroups действительно имеют метод addControl для добавления простых FormControls. Afaik FormGroups не имеют addFormArray or addFormGroup метод. Поэтому мне нужна ваша помощь.

Следующая ситуация: 

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

Добавление простого элемента управления в более поздний момент времени легко: 

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

Но как насчет добавления FormArrays и FormGroups в существующую FormGroup? Например, я хотел бы использовать для этой цели следующий массив и объект: 

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

Я бы хотел добавить авторовArray или metaData только тогда, если они существуют. Вот почему я хочу добавить их позже.

p.s. Пожалуйста, игнорируйте правила валидации.

Ответы [ 2 ]

3 голосов
/ 25 марта 2019

FormGroup Метод addControl принимает AbstractControl в качестве параметра, который может быть либо FormControl, либо FormArray, либо другим FormGroup, поскольку все они расширяются AbstractControl. 

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

FormBuilder может помочь вам создать такие элементы управления с помощью методов array() и 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})
});

После этого вы можете использовать фабрику для создания необходимых элементов управления(независимо от того, что это за контроль): 

this.myForm.addControl('authors', this.fb.array(['George Michael', 'Aretha Franklin']))
this.myForm.addControl('metaData', this.fb.group({ description : 'Great Book', publication: 2019}))
1 голос
/ 25 марта 2019

Вы можете просто передать FormArray вместо FormControl.

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

Редактировать: использовать существующее значение

Чтобы использовать значение из массива authors, используйте это: 

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

OR

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

...