在我们的应用中，我们使用Signal Forms（信号表单）并希望把表单模型中的一个值绑定到一个输入字段：

<input matInput [formField]="formModel.myenum"/>

不幸的是，属性 myenum 是一个枚举。因此我们想使用名为 toDisplayString(...) 的辅助方法将该枚举转换为字符串：

<input matInput [formField]="toDisplayString(formModel.myenum().value)"/>

这段代码有三个错误：

类型 'string' 无法分配给类型 'Field'

此表达式不可调用。类型 'String' 没有调用签名

类型为 'WritableSignal' 的参数无法分配给类型为 'myenum' 的参数

我同意，由于类型不匹配，在绑定中进行该转换是不可行的。

为解决这个问题我的建议：引入一个额外的属性，在映射过程中执行该表达式：

formModel {
    myenum: MyEnum;
    myenumDisplayString: ''; // <-- new property
}

// mapper
dtoToFormModel(dto) {
    return {
        myenum: dto.myenum;
        myenumDisplayString: toDisplayString(dto.myenum);
    }
}

// HTML
<input matInput [formField]="formModel.myenumDisplayString"/>

但我不确定：解决这个问题的最佳实践是什么？

解决方案

不要把表达式放在 [formField] 里。[formField] 期望的是Signal Forms的字段，而不是字段的值。

错误：

<input matInput [formField]="toDisplayString(formModel.myenum().value)"/>

正确：

<input matInput [formField]="form.myenumDisplayString" />

在formModel

interface MyFormModel {
    myenum: MyEnum;
    myenumDisplayString: string;
}

映射器：

dtoToFormModel(dto: MyDto): MyFormModel {
  return {
    myenum: dto.myenum,
    myenumDisplayString: toDisplayString(dto.myenum),
  };
}

注：如果只是用于显示，最好使用计算值，而不要使用 [formField]