Angular 響應式表單之下拉框

siberiawolf 發布于2019-08-23 15:38 / 3420人閱讀

摘要：問題分析下拉框綁定的改變時，但是值卻沒有改變，導致檢查錯誤。性別下拉框的男女保密點擊刪除保密男女此時就尷尬了，中已經沒有保密選項了，但是下拉框綁定的卻還是。自定義控件中當更新后，不再中，重置為刪除后使用男女

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

GPU云服務器云服務器響應式響應式布局響應式網站響應式設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102357.html

angular4 學習記錄 -- 表單

摘要：在表單上添加的會攔截標準的表單提交事件。并為它們提供了一些共同的行為和屬性，其中有些是可觀察對象。用于跟蹤一個單獨的表單控件的值和有效性狀態。組件中的頂級表單就是一個。在表單所在的中的上添加，再在指定的驗證方法中調用來顯示驗證失敗信息。 angular4 表單模板表單在app.module中導入FormsModule之后，項目中的form表單都會是一個ngForm，也就是一個模板表...

james 2019-08-21 16:45 評論0 收藏0
angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

alogy 2019-08-29 16:54 評論0 收藏0
angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

hzc 2019-08-02 11:40 評論0 收藏0
angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

MycLambert 2019-08-23 12:16 評論0 收藏0
JavaScript 資源大全中文版

摘要：官網全新的靜態包管理器。官網一個整合和官網的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。官網小巧的兼容的所見即所得的富文本編輯器。官網富文本編輯器。官網由制作，適用于每天寫作的富文本編輯器。 1. 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。 npm：npm 是 javascript 的包管理器。官網 cnpm：cnpm 是由于國...

jzman 2019-08-23 17:18 評論0 收藏0