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