属性"控件"在类型"抽象控件"上不存在。在角度 8

Question

我需要使用表单数组来创建动态表单。

我在TS文件中创建了一个此表单：

createForm(): void {
this.addQuestionForm = this._formBuilder.group({
title: [
'', Validators.compose(
[
Validators.required,
Validators.maxLength(this.val.maxLen.title)
])
],
courseExamId: ['', Validators.compose([Validators.required])],
courseOptions: this._formBuilder.array([])
});
}
// Initial FormArray
createItem(): FormGroup {
return this._formBuilder.group({
optionTitle: [
'', Validators.compose(
[
Validators.required
])
],
isCorrect: [
false,
Validators.compose(
[
Validators.required]
)
]
});
}

这是 HTML 中用于使用表单数组的 MT 代码：

<div formArrayName="courseOptions" class="row m-auto"
*ngFor="let project of addQuestionForm.get('courseOptions').controls; let i = index">
<ng-container [formGroupName]="i">
<!-- optionTitle -->
<div class="col-lg-10 kt-margin-bottom-20-mobile">
<mat-form-field class="mat-form-field-fluid" appearance="outline">
<mat-label>{{'COURSE_QUESTION.ANSWER' | translate}} *</mat-label>
<input matInput formControlName="optionTitle"
[placeholder]="'COURSE_QUESTION.ANSWER' | translate">
<mat-error *ngIf="addQuestionForm.get('title').errors?.required">
{{ 'COURSE_QUESTION.VALIDATIONS.REQUIRED.ANSWER' | translate }}
</mat-error>
</mat-form-field>
</div>
<!-- isCorrect -->
<div class="col-lg-1 kt-margin-bottom-20-mobile icon">
<mat-radio-group name="radp" aria-label="Select an option"
formControlName="isCorrect">
<mat-radio-button value='true'>{{'COURSE_QUESTION.TRUE' | translate}}
</mat-radio-button>
</mat-radio-group>
</div>
<div class="col-lg-1 kt-margin-bottom-20-mobile icon remove text-center">
<label (click)="deleteItem(i)"><i class="la la-trash"></i></label>
</div>
</ng-container>
</div>
<div class="add-Item">
<button (click)="AddItems()" mat-raised-button type="button" color="accent"> <i
class="la la-plus"></i>{{'COURSE_QUESTION.ADD_NEW_OPTION' |translate}}</button>
</div>
</div>

但是当我需要使用此页面时，它会显示此错误：

属性"控件

"在类型"抽象控件"上不存在。

问题出在哪里？我该如何解决此???

Answer 1

我认为问题在于你如何形成.html，必须像

<!--first a div with the name of the form Array-->
<div formArrayName="courseOptions">
<!--after the loop-->
<div class="row m-auto" 
*ngFor="let project of addQuestionForm.get('courseOptions').controls; let i = index">
...
</div>
</div>

但我不确定，也许你需要为你创建一个 FormArray

get courseOptions()
{
return this.addQuestionForm? this.addQuestionForm.get('courseOptions') as Form Array:null
}

在你的.html

<div formArrayName="courseOptions">
<div class="row m-auto" *ngFor="let project of courseOptions.controls; let i = index">
...
</div>
</div>