Используется formarray без тега формы в содержимом html, поэтому добавленный тег формы и код не работают

Question

Angular 9: Используется formarray без тега формы в содержимом html, но теперь нужно добавить проверки и тег формы в компонент html, теперь код не работает!

Используется formarray для динамической генерации строки элементов управления (textbox и textarea) при нажатии кнопки; Компонент html не имел тега form, и это было достигнуто путем предварительного создания formarray:

requirement=new FormArray([]);

и в компоненте html добавлено следующее:

    <tr let req of requirement.controls let i=index>
<td>
<input type="number" name="Req#" [(NgModel)]="reqno"/>
</td>
<td>
<textarea type="text" name="Req" [(NgModel)]="req"></textarea>
</td>
:
:
:
</tr>

и при нажатии кнопки применен следующий код:

this.requirement.push(new FormControl(''));

Это помогает в создании динамических c элементов управления, но с это невозможно выполнить, поэтому в компонент html добавлен тег формы и добавлено formControlName вместо NgModel и вместо приведенного выше кода машинописного текста: объявить formarray следующим образом:

publi c требование: FormArray;

и инициализировать то же самое в ngOnInit ():

this.requirement=new FormArray([
new FormGroup({

reqno:new FormControl('');
req:new FormControl('');

})
]);

после изменения этого параметра Ngif и NgFor не работают. Может ли кто-нибудь помочь. * 102 1 *

Answer 1

@ AleshaDeveloper, FormArray - это ReactiveForms, [(ngModel)] - это форма, управляемая шаблоном

Ну, создайте функцию, которая возвращает formGroup. Вы можете использовать валидаторы в своей функции

newFormGroup()
{
  return new FormGroup({
    reqno:new FormControl(''),
    req:new FormControl('',Validators.required)
  })
}

И использовать его в ngOnInit для создания формы и в функции для добавления элемента

ngOnInit()
{
    this.requirement=new FormArray([this.newFormGroup()])
}

addGroup()
{
   this.requirement.push(this.newFormGroup())
}

Мы создаем вспомогательную функцию, которая вернуть formGroup из formArray по индексу (*)

  groupAt(index)
  {
    return this.requirement.at(index) as FormGroup
  }

Теперь мы можем использовать эту функцию, создавая formGroup для каждой строки

<tr *ngFor="let group of requirement.controls;let i=index" [formGroup]="groupAt(i)">
<td>
  <input type="number" formControlName="reqno"/>
</td>
<td>
  <textarea type="text" name="Req" formControlName="req"></textarea>
</td>
</tr>

Посмотрите, что вы используете formControlName как другую formGroup см. docs

Вы можете увидеть в stackblitz

(*) Перед Angular вы можете написать [formGroup] = "group" напрямую, но в недавнем Angular вам нужна помощь angular и скажите, что это FormGroup