angularangular-materialangular-reactive-formsangular-formsangular-formbuilder

Multiple values in form builder


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>

Solution

  • 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']}));
    }