Angular响应式表单控件绑定类型错误问题求助

你遇到的问题是因为<select>的选项中用[value]绑定了整个UserFunction对象。虽然[value]设计用于绑定字符串、数字这类基本类型，但Angular在绑定对象时会保留其引用，导致表单控件的值变成UserFunction实例，而非预期的字符串。

方案1：直接绑定目标字符串属性 #

如果你的需求是让function控件的值为UserFunction中的userFunction（或id）字符串，直接修改HTML中选项的[value]绑定目标：

<select formControlName="function" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.function.errors }">
  <option *ngFor="let item of userFunctions" [value]="item.userFunction">
    {{ item.userFunction }}
  </option>
</select>

设置后，this.form.get('function').value就会返回选中项的userFunction字符串值。如果需要的是id字段，把item.userFunction换成item.id即可。

方案2：保留对象绑定并按需提取字符串 #

如果业务逻辑需要在表单中保留UserFunction对象（比如后续要用到对象的其他属性），可以改用[ngValue]绑定整个对象，之后在需要字符串值的时候提取对应属性：

修改HTML： #

<select formControlName="function" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.function.errors }">
  <option *ngFor="let item of userFunctions" [ngValue]="item">
    {{ item.userFunction }}
  </option>
</select>

取值时提取字符串： #

// 获取选中的UserFunction对象
const selectedFunction = this.form.get('function').value as UserFunction;
// 提取需要的字符串值
const functionString = selectedFunction.userFunction; // 或 selectedFunction.id

如果你使用了自定义验证器functionValidator，需要注意验证逻辑是否适配修改后的值类型：方案1不需要调整；方案2则要修改验证器，基于UserFunction对象的属性进行校验。

内容的提问来源于stack exchange，提问作者Janciu