Vaadin Hilla中布尔值模型映射RadioButton调用read报错问题

问题代码 #

const {field, model, read} = useForm(MyModel);

<VerticalLayout style={{ alignItems: 'stretch', width: '18rem', maxWidth: '100%' }}>
  <TextField label="Title" {...field(model.title)} />
  <NumberField label="Order" {...field(model.order)} />
  <RadioGroup label="Status" {...field(model.isEnabled)} >
    <RadioButton value="true" label="Enable" />
    <RadioButton value="false" label="Disabled" />
  </RadioGroup>
</VerticalLayout>

调用read(model)时出现错误：

The radio button with the value "true" was not found.

错误原因 #

你的RadioButton组件使用的是字符串类型的value（"true"、"false"），但model.isEnabled的类型是布尔类型（true、false）。当调用read(model)时，组件会尝试匹配与model.isEnabled值完全一致的单选框选项，布尔值true和字符串"true"属于不同类型，无法匹配，因此抛出找不到选项的错误。

解决方案 #

方案1：统一单选框value的类型为布尔值

如果你的UI组件支持布尔类型的value，直接修改RadioButton的value为布尔值：

<RadioGroup label="Status" {...field(model.isEnabled)} >
  <RadioButton value={true} label="Enable" />
  <RadioButton value={false} label="Disabled" />
</RadioGroup>

方案2：转换model值的类型为字符串

在调用read(model)前，将model.isEnabled的布尔值转换为字符串，与单选框的value类型匹配：

// 转换布尔值为字符串
model.isEnabled = model.isEnabled.toString();
read(model);

方案3：使用字段转换器（如果useForm支持）

如果你的useForm工具支持字段转换，可以在绑定字段时添加转换器，自动在视图值和模型值之间做类型转换：

<RadioGroup label="Status" {...field(model.isEnabled, {
  converter: {
    // 视图值转模型值：字符串转布尔
    toModel: (viewValue) => viewValue === 'true',
    // 模型值转视图值：布尔转字符串
    toView: (modelValue) => String(modelValue)
  }
})} >
  <RadioButton value="true" label="Enable" />
  <RadioButton value="false" label="Disabled" />
</RadioGroup>

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