迭代 FormArray 以显示表单字段

问题描述

我正在尝试用响应式形式来做一些事情，但很难实现我认为很简单的事情。

我想遍历元素并将它们显示为表单控件。

我目前拥有：

@Component({
  selector: 'app-reactive-form-test',styleUrls: ['./reactive-form-test.component.scss'],template: `
    <form [formGroup]="questionForm">
      <ng-container formArrayName="questions" *ngFor="let question of questionForm.controls; let i = index">
<input type="text" formControlName="i">
</ng-container>
    </form>
  `
})
export class ReactiveFormTestComponent implements OnInit {
  questionForm: FormGroup;

  questions: ScheduledQuestionInterface[];

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.questionForm = this.fb.group({
      questions: this.fb.array([])
    });
    this.questions = [];
    this.questions.push(new ScheduledQuestion(1,1,1));
    this.questions.push(new ScheduledQuestion(2,3,2));
    this.questions.push(new ScheduledQuestion(3,4,3));
    this.questions.forEach(value => {
      const control = this.questionForm.get('questions') as FormArray;
      control.push(this.fb.group({
        id: [value.id],deliveryDateTime: [value.deliveryDateTime]
      }));
    });
  }
}

现在我收到以下错误：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.。

我需要对这段代码做什么才能简单地显示来自 3 个 ScheduledQuestion 对象的 3 个文本字段？

解决方法

questionForm.controls 是一个对象，其键为 formControls 基本上在您的情况下

  {
     questions: []
  }

您正在尝试遍历上述不可迭代的对象，因此出现错误

下面应该可以

@Component({
  selector: 'app-reactive-form-test',styleUrls: ['./reactive-form-test.component.scss'],template: `
    <form [formGroup]="questionForm">
      <ng-container formArrayName="questions">
        <ng-container *ngFor="let question of questionControls.controls; let i = index">
<input type="text" [formGroupName]="i">
      </ng-container>
      
</ng-container>
    </form>
  `
})
export class ReactiveFormTestComponent implements OnInit {
  questionForm: FormGroup;

  questions: ScheduledQuestionInterface[];
  get questionControls() {
     return this.questionForm.get('questions') as FormArray;
  }
  

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.questionForm = this.fb.group({
      questions: this.fb.array([])
    });
    this.questions = [];
    this.questions.push(new ScheduledQuestion(1,1,1));
    this.questions.push(new ScheduledQuestion(2,3,2));
    this.questions.push(new ScheduledQuestion(3,4,3));
    this.questions.forEach(value => {
      const control = this.questionForm.get('questions') as FormArray;
      control.push(this.fb.group({
        id: [value.id],deliveryDateTime: [value.deliveryDateTime]
      }));
    });
  }
}

,

这里的问题是你试图循环questionForm.controls，它是不可迭代的，它是一个对象，它不是你需要的，你也不需要重复表单数组，你需要循环遍历此数组中的控件

来自Angular References的示例：

<div formArrayName="cities">
  <div *ngFor="let city of cities.controls; index as i">
    <input [formControlName]="i" placeholder="City">
  </div>
</div>

因此，您的输入/控件需要有 NgFor，并且循环应该结束 questions.controls