如何在 HTML 中访问 formArray 的属性？

Question

我正在尝试实现反应式 Angular 表单，但是，我无法访问 HTML 上 array 的属性，如果有人可以指导我，我从未使用过反应式表单我会很感激！我正在使用 Angular 10 并且我有以下代码：

TS

operationModel: IScriptOperationsModel;
formOperation: FormGroup;

constructor(
  private fb: FormBuilder,
  ...
) {}

ngOnInit() {
  this.operationModel = new IScriptOperationsModel();
  this.operationModel.scriptOperationOrders = [];
  this.buildForm(new IScriptOperationsModel());

  this.scriptOperationsService.findScriptOperation(this.operationId).subscribe((operation) => {
    this.operationModel = operation.data as IScriptOperationsModel;  // api return
    this.buildForm(this.operationModel);  // I pass the return of the api to the form
  });
}

buildForm(operation: IScriptOperationsModel) {
  this.formOperation = this.fb.group({
    descriptionCode: [operation.descriptionCode],
    description: [operation.description],
    workStations: this.fb.array([])
  });
  this.formOperation.setControl('workStations', this.fb.array(this.operationModel.scriptOperationOrders));
}

get workStations(): FormArray {
  return this.formOperation.get('workStations') as FormArray;
}

HTML

<div
  class="card"
  [ngClass]="{'bg-principal': idx === 0, 'bg-alternative': idx !== 0}"
  formArrayName="workStations"
  *ngFor="let workstation of workStations.controls; index as idx"
>
  <div class="card-body" [formGroupName]="idx">
    <div class="form-row">
      <div class="form-group col-md-1">
        <label>Id Oper.</label>
        <input
          type="text"
          name="idOperation"
          class="form-control"
          disabled
          formControlName="rank"            <!-- whatever with or without binding gives error -->
        />
      </div>
      <div class="form-group col-md-2">
        <label>Time</label>
        <input
          type="time" class="form-control" name="defaultTime"
          [formControlName]="defaultTime"   <!-- whatever with or without binding gives error -->
        />
      </div>
    </div>
  </div>
</div>

型号

export class IScriptOperationsModel extends Serializable {
  public description: string;
  public descriptionCode: string;
  public scriptOperationOrders: IScriptOperationOrdersModel[];     // array which I need
}

export class IScriptOperationOrdersModel extends Serializable {
  public rank: number;
  public defaultTime: string;
  public asset?: IAssetModel;
  public provider?: IProviderModel;
}

error-handler.service.ts:87 错误：找不到带有路径的控件：'workStations -> 0 -> rank' @ undefined:undefined

注意：我已经在网站上查看了一些答案，例如 this、this 和 this，但没有一个解决了这个问题！

Answer 1

你的问题在这里：

this.formOperation.setControl(
'workStations',
this.fb.array(this.operationModel.scriptOperationOrders) <== here the problem
);

您传递的是 IScriptOperationOrdersModel 数组，而不是 表单组数组。
为了使您的代码正常工作，您必须循环 this.operationModel.scriptOperationOrders 数组的每个元素，并实例化一个 new FormControl 对象，然后将其推送到 workStations 表单数组中。
要访问其元素，您可以使用controls[indexOfGroup].rate

你可以看看this simple example你就明白了。