Динамически создавать поля FormArray в форме в Angular - PullRequest
Новая
       27

Динамически создавать поля FormArray в форме в Angular

0 голосов
/ 22 апреля 2020

Я изучаю FormArray для создания динамической c формы. Моя проблема заключается в том, что мне нужно связать поля в поле ввода с выбранным элементом в раскрывающемся списке с множественным выбором. Допустим, я выбрал опцию под названием «Foo», затем будут созданы 3 поля для предоставления информации о Foo, и может быть создано больше, поэтому FormArray.

Итак, я ознакомился с этим обучением, чтобы немного узнать о это https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/ но моя проблема в том, что это работает, только если поле FormArray определено в форме с самого начала. То, что я делаю, чтобы связать выбранную опцию и ее поля, динамически создает поле в его форме, например: 

const idCategoria: string =  '1';
this.indicadorModal.addControl('objetivo.' + idCategoria, new FormGroup(
    {
        objetivos: this.fb.array([this.crearObjetoObjetivo()])
    }
));

, это приведет к тому, что indicadorModal (который является FormGroup) будет иметь такие поля, как, например, Объективо.1, Объективо.2 и др. c. НО СЕЙЧАС мне нужно, чтобы они были массивом форм, но я не могу сделать то, что в учебнике, который мне понравился, говорит о том, что элемент управления не существует. Что-то не так с этим?

Спасибо

1 Ответ

0 голосов
/ 22 апреля 2020

Улис, я думаю, вы смешиваете понятия. Dinami c Форма может быть FormArray или FormGroup. Я думаю, вы ищете FormGroup, так что взгляните на документы о FormGroup

Если у вас есть FormGroup и массив объектов 

  myForm=new FormGroup({})
  fields:any[]=[];

Вы можете добавить formControl к formGroup, используя addControl, например, 

addFields()
{
     this.myForm.addControl('name',new FormControl())
     this.myForm.addControl('surname',new FormControl())

     this.fields.push({name:'name',label:'Name'})
     this.fields.push({name:'surname',label:'Surname'})
}

И вы можете перебирать поля массива в вашем. html

<form [formGroup]="myForm">
  <div *ngFor="let field of fields">
    {{field.label}}:<input [formControlName]="field.name">
  </div>
</form>

Убедитесь, что это не FormArray но это "Dynami c"

См. код в простом стеке

...