Angular 响应式表单之下拉框

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();
  }