I have angular app with page that uses reactive form and one of the field – array. Also I’m using ng-select package with array of objects that separated by groupId:

[{id: 1, name: 'name', groupId: 1, groupName: 'group name'}, ...]

<div class="row" *ngFor="let item of form.controls.conditions['controls']; let i = index" [formGroupName]="i">
  <div class="col-sm-3 mb-4">
    <ng-select formControlName="field"
               [items]="triggerFields"
               bindLabel="name"
               bindValue="id"
               groupBy="groupId"
               [clearable]="false">
    </ng-select>
  </div>

  <input class="form-control" type="hidden" formControlName="type" [value]="item.controls.field.value == 1 ? 'one' : 'two'" />
  <input class="form-control" type="hidden" formControlName="subType" [value]="item.controls.field.value == 2 ? 'one' : 'two'" />

</div>

In html template above I need to get groupId to put appropriate value into hidden inputs.

But item.controls.field.value get only bindValue property of object.
I also tried something like:

{{ triggerFields.find(x => x.id == item.controls.field.value)!.groupId }}

But that code doesn’t work into html template.

Is there way to implement that?