Angular 使用 ControlValueAccessor 創建自定義表單控件

AJie 發布于2019-08-23 15:43 / 2549人閱讀

摘要：在自定義表單控件，有時你想要的輸入不是標準的文本輸入選擇或復選框。它獲取一個函數，告訴其他表單指令和表單控件更新其值。與此類似，它專門為控件接收觸摸事件時注冊一個處理程序。

在 Angular 自定義表單控件，有時你想要的輸入不是標準的文本輸入、選擇或復選框。通過實現ControlValueAccessor 接口并將組件注冊為 NG_VALUE_ACCESSOR，您可以將自定義表單控件無縫地集成到模板驅動或響應表單中，就像它是本地表單一樣!

ControlValueAccessor

ControlValueAccessor 是一個接口，充當Angular API 和 DOM 元素之間的橋梁

export interface ControlValueAccessor {
  writeValue(obj: any) : void
  registerOnChange(fn: any) : void
  registerOnTouched(fn: any) : void
}

writeValue（obj：any）是將表單模型中的值寫入視圖中。

writeValue(value: any): void {
   this._renderer.setProperty(this._elementRef.nativeElement, "value", value);
}

registerOnChange（fn：any）是一個方法，用于注冊在視圖中的某些內容發生更改時應調用的處理程序。它獲取一個函數，告訴其他表單指令和表單控件更新其值。

registerOnChange(fn: (_: any) => void): void {
   this._onChange = fn;
}

registerOnTouched（fn：any）與registerOnChange()此類似，它專門為控件接收觸摸事件時注冊一個處理程序。

registerOnTouched(fn: any): void {
   this._onTouched = fn;
}

setDisabledState?(isDisabled: boolean): void; 是一個可選的方法，設置自定義表單的狀態

setDisabledState(isDisabled: boolean): void {
   this._renderer.setProperty(this._elementRef.nativeElement, "disabled", isDisabled);
}

AbstractValueAccessor

我們可以把 ControlValueAccessor 中的方法寫在一個抽象類中，不同的組件可以實現這個基類

export abstract class AbstractValueAccessor implements ControlValueAccessor {
  
  private _value: any = "";
  
  get value(): any {
    return this._value;
  }

  set value(v: any) {
    if (v !== this._value) {
      this._value = v;
      this.onChange(v);
      this.onTouched();
    }
  }

  writeValue(value: any) {
    this._value = value;
  }

  onChange = (_) => {};
  onTouched = () => {};

  registerOnChange(fn: (_: any) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }
}

export function MakeProvider(type: any): { provide: any, useExisting: any, multi: boolean} {
  return { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => type), multi: true };
}

Example

自定義一個 list 控件，可以選擇年級

在線預覽

git倉庫

GPU云服務器云服務器使用自定義鏡像創建實例自定義控件? 自定義控件自定義控件安卓

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

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

[譯] 別再對 Angular 表單的 ControlValueAccessor 感到迷惑

摘要：在里我們簡單保存了對回調函數的引用，回調函數是由指令傳入的譯者注參考，只要每次組件值發生改變，就會觸發這個回調函數。原文鏈接：Never again be confused when implementing ControlValueAccessor in Angular?forms showImg(https://segmentfault.com/img/bV7rR7?w=400...

blastz 2019-08-22 15:57 評論0 收藏0
@angular/forms 源碼解析之雙向綁定

摘要：由于的屬性提供了令牌，并且該令牌指向的對象就是，所以構造函數中注入的令牌包含的對象數組只有一個。這樣的構造函數里就會包含一個對象，然后把這個傳給對象，最后注冊回調，這樣以后值更新時就會運行。整個包的設計也是按照這種數據流形式，并不復雜。我們知道，Angular 的 @angular/forms 包提供了 NgModel 指令，來實現雙向綁定，即把一個 JS 變量（假設為 name）與...

yangrd 2019-08-23 10:36 評論0 收藏0
構建一個自定義 angular2 輸入組件

摘要：構建一個自定義輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。值訪問器在完成上面的一些步驟之后，我們的組件基本功能完成了，但是接下來還有最重要的一部分內容，那就是讓我們的自定義組件獲得值訪問權限。構建一個自定義 angular2 輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。在讀這篇文章...

CNZPH 2019-08-02 15:56 評論0 收藏0
構建一個自定義 angular2 輸入組件

摘要：構建一個自定義輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。值訪問器在完成上面的一些步驟之后，我們的組件基本功能完成了，但是接下來還有最重要的一部分內容，那就是讓我們的自定義組件獲得值訪問權限。構建一個自定義 angular2 輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用，但同時也具有自己的邏輯的輸入組件。在讀這篇文章...

pekonchan 2019-08-20 12:32 評論0 收藏0
使用Angular7開發一個Radio組件

摘要：一準備工作以下簡稱已經跟之前版本大有不同。新建工程后，可方便創建簡稱是什么呢就是一個包的源碼包。本文主要介紹本人寫的一個組件。這是的一個可以方便原生和傳值。本組件兩個方法都重寫了，因為值變更的時機自定義成了。一、準備工作 Angular7（以下簡稱ng7）,已經跟之前版本大有不同。新建工程后，可方便創建library（簡稱lib）,lib是什么呢？就是一個npm包的源碼包。npm作為...

Tony_Zby 2019-08-23 18:26 評論0 收藏0