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

大佬教程收集整理的这篇文章主要介绍了如何在 HTML 中访问 formArray 的属性？ TSHTML模型，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何在 HTML 中访问 formArray 的属性？ TSHTML模型？

我正在尝试实现一个响应式 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 错误：找不到路径控制：'workStation -> 0 -> rank'@undefined:undefined

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

解决方法

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

大佬总结

以上是大佬教程为你收集整理的如何在 HTML 中访问 formArray 的属性？ TSHTML模型全部内容，希望文章能够帮你解决如何在 HTML 中访问 formArray 的属性？ TSHTML模型所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。