Создание массива форм Angular 12
При реализации возникли следующие ошибки:
Error: src/app/expert-cabinet/screens/expert-new-scenario/expert-new-scenario.component.html:47:38 - error TS7052: Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?
<div *ngFor="let question of questionForms.get('questions')['controls']; let i = index" [formGroupName]="i">
Error: src/app/expert-cabinet/screens/expert-new-scenario/expert-new-scenario.component.html:47:38 - error TS2531: Object is possibly 'null'.
<div *ngFor="let question of questionForms.get('questions')['controls']; let i = index" [formGroupName]="i">
Реализован класс:
export class ExpertNewScenarioComponent {
questionForms: FormGroup;
constructor() {
this.questionForms = new FormGroup({
questions: new FormArray([])
});
}
onAddQuestion() {
const question = new FormGroup({
name: new FormControl(),
symptoms: new FormControl()
});
(<FormArray>this.questionForms.get('questions')).push(question);
}
// Test
onSaved() {
console.log(this.questionForms.value);
}
}
Реализован шаблон:
<form [formGroup]="questionForms" class="scenario-cards">
<div formArrayName="questions" class="card scenario-card" >
<div *ngFor="let question of questionForms.get('questions')['controls']; let i = index" [formGroupName]="i" >
<div class="mb-3">
<label for="question-text" class="form-label">Текст вопроса</label>
<input type="text" class="form-control" id="question-text">
</div>
<div class="scenario-card--answer">
<div class="mb-3">
<label for="question-answers" class="form-label">Ответы (симптомы)</label>
<input type="text" class="form-control" id="question-answers">
</div>
</div>
<div class="scenario-btn">
<button class="btn blue_btn">Удалить вопрос</button>
</div>
</div>
</div>
</form>
Каким образом возможно решить данные ошибки?
Ответы (1 шт):
Найдено решение. Перевод с английского Stack Overflow
Как говорится в ошибке 'AbstractControl' has no index signature Нам нужен способ сообщить TS что usersForm.get('questions') возвращает FormArray.
get questionFormGroups () {
return this.questionForms.get('questions') as FormArray
}
В шаблоне указать
<div *ngFor="let question of questionFormGroups.controls; let i = index" [formGroupName]="i" >