Angular 响应式表单之下拉框

一、问题分析

下拉框绑定的 options 改变时，可是 value 值却没有改变，致使检查错误。

• 在线预览
• git仓库

二、代码分析

项目中遇到一个问题，选择司机，是一个下拉列表。这个司机列表是一个动态列表，当你选择的司机再也不列表中，能够添加司机，而后再选择；也有可能你选择了司机，还未提交时，这个司机就被删除了，须要给出错误提示。

简化一下须要，性别选择，选中了保密后，删除这个选项。

性别下拉框的 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();
  }