html - 从 Angular 8 升级到 12 后出现错误 - “‘AbstractControl’ 类型上不存在属性‘控件’”

问题描述

我在 Angular 8 中有一个功能齐全的代码。我决定从 Angular 8 升级到 Angular 12。

我有一个动态的反应形式。形式为问答形式。根据谁在登录，问题会发生变化。答案是是/否格式。根据谁登录和选择什么答案选项文本框下拉和复选框或所有提到的应用程序。

这是我的表单代码

组件.ts

constructor(
    private router: Router,
    private datePipe: DatePipe,
    private route: ActivatedRoute,
    private formBuilder: FormBuilder) {      
    this.dynamicForm = this.formBuilder.group({
        questions: new FormArray([])
    });
    this.CreateForm();
}

get f() { return this.dynamicForm.controls; }
get t() { return this.f.questions as FormArray; }


CreateForm() {
    if (this.formdetail.questionList) {
        // CREATE Questions
        if (racialQues !==  this.formdetail.questionList[i].quetext && this.formdetail.questionList[i].quetext !== auditQues) {
            this.t.push(this.formBuilder.group({
                quesIndex: [i + 1],
                ...
                controlName: [this.formdetail.questionList[i].selectedAns, [Validators.required]]
            }));
        } else if (this.formdetail.questionList[i].quetext === auditQues) {
            this.t.push(this.formBuilder.group({
                quesIndex: [i + 1],
                ......
                selectedValue: [this.formdetail.auditTrail.selectedValue, this.reasonValidator],
            }));
        } else if (this.formdetail.questionList[i].quetext === racialQues) {
      
            this.t.push(this.formBuilder.group({
                quesIndex: [i + 1],
                ......
                selectedAuxAns: [this.formdetail.questionList[i].val, [this.auxAnsValidator]]
            }));
        }
    }
}

这是html

<form [formGroup]="dynamicForm"> 
<!--  Question Start -->
<div *ngFor="let ticket of t.controls; let i = index">
    <div [formGroup]="ticket" class="form-row">  
        <div class="input-group col-md-12" style="padding: .15em .5em">                                        
            <div class="input-group-prepend col-md-10" style="padding: 0; margin: 0;">                
                <label class="input-group-text w-15">{{i + 1}}</label>
                <label class="input-group-text w-100" style="text-align: left; white-space: normal;">{{ticket.controls.name.value}}</label>
            </div>                                 
            <select formControlName="controlName" class="form-control col-md-2" style="height:auto !important;" 
                [ngClass]="{ 'is-invalid': submitted && ticket.controls.controlName.errors }"
                (change)="onChange($event.target.value, i)">
                <option [ngValue]="null"> --Select-- </option>
                <option *ngFor="let ansItem of formdetail.questionList[i].answerList" [ngValue]="ansItem" >{{ansItem.anstext}}</option>
            </select>
            <div *ngIf="submitted && ticket.controls.controlName.errors" class="invalid-feedback" style="height:auto !important;" 
            [ngClass]="{ 'input-group-append': submitted && ticket.controls.controlName.errors,
                         'col-md-1': submitted && ticket.controls.controlName.errors }">
                <div *ngIf="ticket.controls.controlName.errors.required">Required</div>
            </div>
            .
            .
            .
            .
            
        </div>  
    /div>
</div>     
<!--  Question End -->                
</form>

现在我在“ticket.control”中遇到错误

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

我不确定为什么升级后会出现此错误。我已经尝试过ticket.['control']或ticket.get('controlName')按照stackoverflow中类似错误的其他文章的建议，但没有任何效果

这是错误的快照

任何帮助将不胜感激。谢谢

标签： htmlangulartypescript

这是帮助解决此类问题的通用答案（通用代码）。假设您有一个循环遍历 FormArray 类型的字段（称为元素）。此字段是 FormGroup 类型的表单的一部分

在您的 ts 逻辑代码（逻辑实现）中，您应该具有以下内容：

  form = new FormGroup({
   //.. other fields
    elements: new FormArray([]),
  });

在您的模板（html 文件）中，您需要遍历元素字段：

<li
  *ngFor="let element of elements.controls">
  {{ element.value }}
</li>

为了告诉 Angular cli 元素具有控件的属性（因此是 FormArray 类型），您需要在 ts 逻辑代码中将其格式化如下（为元素字段实现 getter）：

  get elements() {
    return this.form.get('elements') as FormArray;
  }

html - 从 Angular 8 升级到 12 后出现错误 - “‘AbstractControl’ 类型上不存在属性‘控件’”

问题描述

解决方案

推荐阅读