在角度中设置表单数组中字段的值

Question

我有一个 Angular Material 步进器，它使用多种形式设置为一个数组，如下所示。当我在编辑模式下打开表单并注入要编辑的数据时，我找不到正确的方法来访问表单数组中的值以使用

setValue()

初始化它们

  ngOnInit(): void {
    this.formArray = this.formBuilder.array([
      this.formBuilder.group({
        inboundFlight: ['', Validators.required]
      }),
      this.formBuilder.group({
        outboundFlight: ['', Validators.required]
      }),
      this.formBuilder.group({
        movements: ['1', Validators.required],
        remarks: ['']
      })
    ]);
    this.flightReportForm = this.formBuilder.group({ formArray: this.formArray });

    if (this.editData) {
      this.formTitle = 'Edit Report';

      this.flightReportForm.get('formArray.0').get('inboundFlight').setValue(this.editData.inboundFlight); //this does not work
    }
  }

这就是我将表单值设置为非数组形式的方式，但我无法在我的示例中使用它：

this.someOtherForm.controls['someField'].setValue(this.editData.someField);

Answer 1

ChatGPT 来救援！以下解决方案完美运行：

    if (this.editData) {
      this.formTitle = 'Edit Report';

      const formArray = this.flightReportForm.controls['formArray'] as FormArray;
      const inboundFlightGroup = formArray.at(0) as FormGroup;
      const outboundFlightGroup = formArray.at(1) as FormGroup;
      const movementsGroup = formArray.at(2) as FormGroup;

      inboundFlightGroup.controls['inboundFlight'].setValue([this.editData.inboundFlight]);
      outboundFlightGroup.controls['outboundFlight'].setValue([this.editData.outboundFlight]);
      movementsGroup.controls['movements'].setValue(this.editData.movements);
      movementsGroup.controls['remarks'].setValue(this.editData.remarks);
    }