“AbstractControl”类型上不存在属性“控件”。在角度 8答案

【问题标题】：Property 'controls' does not exist on type 'AbstractControl'. in angular 8“AbstractControl”类型上不存在属性“控件”。在角度 8
【发布时间】：2019-10-12 16:04:02
【问题描述】：

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

我在 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>

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

“AbstractControl”类型上不存在属性“控件”。

有什么问题？我该如何解决这个？？？

【问题讨论】：

courseOptions 没有任何形状。您应该将 createItem() 分配给 courseOptions 数组
@Chellappan 我怎么能这么说？？？？
将 createItem 分配给课程选项数组。 courseOptions: this._formBuilder.array([this.createItem()])
@Chellappan 仍然显示错误
查看这个例子：stackblitz.com/edit/angular-fc-example

标签： javascript angular typescript

【解决方案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>

【讨论】：