Multiple values in form builder

Question

Actually i'm only saving the value of "member.text", but i want save to "member.id", in "this.fb.group". It's possible save both values at same time? I need value to display the value in table and id to send to my service.

form: FormGroup = this.fb.group({
    result: this.fb.array([]),
});

get result() : FormArray {
    return this.form.get('result') as FormArray;
}

addMember(){
    this.result.push(this.fb.group({value: ['', Validators.required], type: ['member']}));
}

<mat-select formControlName="value">
    <mat-option *ngFor="let member of membersList;" [value]="member.text">
        {{member.text}}</mat-option>
</mat-select>

Answer 1

Create a model for member and assign an instance of the model as the value of the control when initialising the control, and change the value filed in the mat-option to use member.id

<mat-select formControlName="value">
  <mat-option *ngFor="let member of membersList" [value]="member.id">
    {{ member.text }}
  </mat-option>
</mat-select>

model ts

class Member {
  id: number;
  text: string;
}

component ts

addMember(){
    this.result.push(this.fb.group({value: [new Member(), Validators.required], type: ['member']}));
}