成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

AJie / 2620人閱讀

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

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

ControlValueAccessor

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

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

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

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

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

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

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

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 控件，可以選擇年級

在線預(yù)覽

git倉庫

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/102501.html

相關(guān)文章

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

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

    blastz 評論0 收藏0

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

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

    yangrd 評論0 收藏0

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

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

    CNZPH 評論0 收藏0

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

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

    pekonchan 評論0 收藏0

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

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

    Tony_Zby 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<