CRUD项目更新页gender单选框选中值无法保存问题求助
错误原因
编辑页单选按钮存在两处必改问题:
- 同组单选按钮未设置相同的
name属性,没有name属性的表单控件提交时值不会被后端接收,且无法实现单选互斥效果 - 两个选项的
value属性错误绑定了动态值{{EmpModel.gender}},单选按钮的value应该是固定的选项值,和新增页保持一致,默认选中状态需要通过checked属性控制,而不是改value。
正确代码实现
编辑页性别字段代码调整为和新增页结构一致,增加选中状态判断即可:
<tr> <td>gender</td> <td> <input type="radio" value="male" name="gender" {{EmpModel.gender === 'male' ? 'checked' : ''}}>male | <input type="radio" value="female" name="gender" {{EmpModel.gender === 'female' ? 'checked' : ''}}>female </td> </tr>
补充说明
- 如果当前使用的模板引擎不支持行内三元表达式,替换为对应模板的条件渲染语法即可,核心逻辑是:当存储的员工性别值和当前选项的value匹配时,给该单选按钮加上
checked属性,实现回显选中 - 同组单选的
name属性值必须完全一致,否则会出现可以同时选两个、提交值错误的问题 - 不要动态修改单选按钮的固定value值,否则提交时永远拿到的是旧的性别值,更新自然不会生效。
内容的提问来源于stack exchange,提问作者Ameya Potdar
相关产品推荐
相关产品推荐

