How to access the properties of a formArray in HTML?

I’m trying to implement a reactive Angular form, but, I can’t access the properties of the array on HTML, I never worked with reactive form, if anyone could guide me I would be grateful! I’m using Angular 10 and I have the following code:

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>

Models

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 Error: Cannot find control with path: ‘workStations -> 0 -> rank’ @ undefined:undefined

NOTE: I already looked at some answers here on the site such as this, this and this , but none of them solved this problem!

Answer

your problem is here :

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

you are passing an array of IScriptOperationOrdersModel instead of array of form group.
To make your code working, you have to loop on every element of this.operationModel.scriptOperationOrders array , and instanciate a new FormControl object then push it in the workStations form array.
To access its elements, you can use controls[indexOfGroup].rate

You can take a look at this simple example you will understand everything.

TS

HTML

Models

Advertisement

Answer