Question

我的Angular 6应用程序中有一个反应性表单，当尝试动态创建表单控件时出现错误：

在这种情况下，questionValues是具有多个控件的FormGroup：

report-create.ts 在Init上具有以下内容：

this.reportForm = this.fb.group({
  // there are other parts to this form which I'm leaving out
  questionValues: this.qcs.toFormGroup(this.questions)
});

toFormGroup从https://angular.io/guide/dynamic-form中基本上是相同的代码：

toFormGroup(questions: ReportQuestionBase<any>[]) {
  const group: any = {};

  questions.forEach(question => {
    group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
      : new FormControl(question.value || '');
  });
  return new FormGroup(group);
}

这是我的html：

<form [formGroup]="reportForm" *ngIf="reportForm">
  // once again leaving out the other items
  <app-report-questions [questionValues]="reportForm.controls.questionValues"></app-report-questions>
</form>

report-questions.ts 仅具有一个Input（）：

@Input() questionValues: FormGroup;

使用以下html：

<div [formGroup]="questionValues">
  <div *ngFor="let question of questionValues.controls" class="form-row">
    <mat-form-field>
      <input matInput formControlName="question">
    </mat-form-field>
  </div>
</div>

这将导致错误“找不到类型为'object'的其他支持对象'[object Object]'。NgFor仅支持绑定到Iterable，例如数组。”

Answer 1

questionValues.controls是一个formGroup对象，而不是formArray。您不能使用* ngFor。您可以尝试使用keyValue管道或Object.keys（）方法。

<div [formGroup]="questionValues">
  <div *ngFor="let questionkey of Object.keys(questionValues.controls)" class="form-row">
    <mat-form-field>
      <input matInput formControlName="questionValues.controls[questionkey]">
    </mat-form-field>
  </div>
</div>

在Angular反应性表单中遍历FormGroup时发生错误

1 个答案: