成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Angular 使用 ControlValueAccessor 創(chuàng)建自定義表單控件

AJie / 2561人閱讀

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

在 Angular 自定義表單控件，有時(shí)你想要的輸入不是標(biāo)準(zhǔn)的文本輸入、選擇或復(fù)選框。通過實(shí)現(xiàn)ControlValueAccessor 接口并將組件注冊(cè)為 NG_VALUE_ACCESSOR，您可以將自定義表單控件無縫地集成到模板驅(qū)動(dòng)或響應(yīng)表單中，就像它是本地表單一樣!

ControlValueAccessor

ControlValueAccessor 是一個(gè)接口，充當(dāng)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）是一個(gè)方法，用于注冊(cè)在視圖中的某些內(nèi)容發(fā)生更改時(shí)應(yīng)調(diào)用的處理程序。它獲取一個(gè)函數(shù)，告訴其他表單指令和表單控件更新其值。

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

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

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

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

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

我們可以把 ControlValueAccessor 中的方法寫在一個(gè)抽象類中，不同的組件可以實(shí)現(xiàn)這個(gè)基類

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

自定義一個(gè) list 控件，可以選擇年級(jí)

在線預(yù)覽

git倉(cāng)庫(kù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102501.html

相關(guān)文章

  • [譯] 別再對(duì) Angular 表單的 ControlValueAccessor 感到迷惑

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

    blastz 評(píng)論0 收藏0

  • @angular/forms 源碼解析之雙向綁定

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

    yangrd 評(píng)論0 收藏0

  • 構(gòu)建一個(gè)自定義 angular2 輸入組件

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

    CNZPH 評(píng)論0 收藏0

  • 構(gòu)建一個(gè)自定義 angular2 輸入組件

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

    pekonchan 評(píng)論0 收藏0

  • 使用Angular7開發(fā)一個(gè)Radio組件

    摘要：一準(zhǔn)備工作以下簡(jiǎn)稱已經(jīng)跟之前版本大有不同。新建工程后，可方便創(chuàng)建簡(jiǎn)稱是什么呢就是一個(gè)包的源碼包。本文主要介紹本人寫的一個(gè)組件。這是的一個(gè)可以方便原生和傳值。本組件兩個(gè)方法都重寫了，因?yàn)橹底兏臅r(shí)機(jī)自定義成了。 一、準(zhǔn)備工作 Angular7（以下簡(jiǎn)稱ng7）,已經(jīng)跟之前版本大有不同。新建工程后，可方便創(chuàng)建library（簡(jiǎn)稱lib）,lib是什么呢？就是一個(gè)npm包的源碼包。npm作為...

    Tony_Zby 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<