共计 1159 个字符，预计需要花费 3 分钟才能阅读完成。
1、问题分析
下拉框绑定的 options 改变时，但是 value 值却没有改变，导致检查错误。
在线预览
git 仓库
2、代码分析
项目中遇到一个问题，选择司机，是一个下拉列表。这个司机列表是一个动态列表，当你选择的司机不再列表中，可以添加司机，然后再选择；也有可能你选择了司机，还未提交时，这个司机就被删除了，需要给出错误提示。
简化一下需要，性别选择，选中了保密后，删除这个选项。
性别下拉框的 options
sexOptions: Option[] = [
{value: ‘man’, display: ‘ 男 ’},
{value: ‘woman’, display: ‘ 女 ’},
{value: ‘secret’, display: ‘ 保密 ’},
];
点击删除保密
delete() {
this.sexOptions = [
{value: ‘man’, display: ‘ 男 ’},
{value: ‘woman’, display: ‘ 女 ’},
];
}
此时就尴尬了，options 中已经没有保密选项了，但是下拉框绑定的 value 却还是 secret。
表单值：{“sex”: “secret”}
现在在删除事件中添加一个重置表单控件的条件，即可解决问题
delete() {
this.sexOptions = [
{value: ‘man’, display: ‘ 男 ’},
{value: ‘woman’, display: ‘ 女 ’},
];
this.formGroup.get(‘sex’).reset();
}
表单的 reset() 方法只是让表单的控件置为 null，很不友好。如果没有选择 保密选择，点击删除按钮，值也会被置为空；项目中的选择司机是批量上传，控件有很多，如果重置，会让用户重新输入，不是很好。
如果这个下拉控件是自定义的，就很好解决了，在 ngOnChanges 时检查当前控件的 value 在不在 options 的 value 中，如果不再则 value 置为 null，并且控件使用 updateValueAndValidity 方法，重新计算控件的值和校验状态。
// 自定义控件中
ngOnChanges() {
// 当 optionList 更新后，value 不再 optionList 中，重置 value 为 null
const isReset = this.optionList.some(item => item.value === this.value);
if (!isReset) {
this.value = null;
}
}
// 删除后使用 updateValueAndValidity
delete() {
this.sexOptions = [
{value: ‘man’, display: ‘ 男 ’},
{value: ‘woman’, display: ‘ 女 ’},
];
this.formGroup.get(‘sex’).updateValueAndValidity();
}
