Angular表单构建器如何同时保存member.text与member.id？

当然可以同时保存这两个值，这里提供两种实用的实现方式，满足你“表格显示用text、后端发送用id”的需求：

方式一：绑定整个Member对象到选项值 #

直接把完整的member对象作为下拉选项的绑定值，这样表单控件会保存整个对象，后续按需提取text或id即可。

修改HTML代码 #

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

调整TS代码（可选） #

只需把表单控件的初始值改为空对象，保持原有结构即可：

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

使用方式 #

• 表格显示时：取formControl.value.text
• 发送后端时：取formControl.value.id

方式二：单独新增id字段到表单组 #

如果希望把id和text分开存储在表单的不同字段中，可以给每个表单组新增memberId字段，通过选择事件同步id值。

修改TS代码 #

在表单组里添加memberId字段：

addMember(){
    this.result.push(this.fb.group({
        value: ['', Validators.required], 
        type: ['member'],
        memberId: ['', Validators.required] // 新增存储id的字段
    }));
}

修改HTML代码 #

添加选择事件，同步选中member的id到表单的memberId字段：

<!-- 假设你是循环渲染表单控件，需要传入当前索引i -->
<div *ngFor="let ctrl of result.controls; let i = index" [formGroup]="ctrl">
    <mat-select formControlName="value" (selectionChange)="onMemberSelect($event, i)">
        <mat-option *ngFor="let member of membersList;" [value]="member.text">
            {{member.text}}
        </mat-option>
    </mat-select>
</div>

添加选择事件处理函数 #

在组件中实现onMemberSelect方法，根据选中的text匹配对应的id：

onMemberSelect(event: MatSelectChange, index: number) {
    const selectedMember = this.membersList.find(m => m.text === event.value);
    if (selectedMember) {
        this.result.at(index).get('memberId')?.setValue(selectedMember.id);
    }
}

使用方式 #

• 表格显示时：直接用表单的value字段（存储的是member.text）
• 发送后端时：用表单的memberId字段（存储的是member.id）

内容的提问来源于stack exchange，提问作者Juan.Queiroz