詳解AngularForms中自定義ngModel綁定值的方式-創(chuàng)新互聯(lián)

在 Angular 應(yīng)用中，我們有兩種方式來(lái)實(shí)現(xiàn)表單綁定——“模板驅(qū)動(dòng)表單”與“響應(yīng)式表單”。這兩種方式通常能夠很好的處理大部分的情況，但是對(duì)于一些特殊的表單控件，例如 input[type=datetime] 、 input[type=file] ，我們需要重寫默認(rèn)的表單綁定方式，讓我們綁定的變量不再僅僅只是一個(gè)字符串，而是一個(gè) Date 或者 File 對(duì)象。為了達(dá)成這一目的，我們需要自定義表單控件的 ControlValueAccessor 。

創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、安龍網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為安龍等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

ControlValueAccessor 接口是 Angular Forms API 與 DOM 之間的橋梁，通過(guò)提供不同的 ControlValueAccessor ，我們就可以使用統(tǒng)一的 Angular Forms API 來(lái)操作不同的 HTML 表單元素。

在我們使用 ngModel 或者 formControl 的時(shí)候，這兩個(gè) Directive 會(huì)向 Angular 的依賴注入容器申請(qǐng)實(shí)現(xiàn)了 ControlValueAccessor 接口的對(duì)象，這是一種典型的面向接口編程的設(shè)計(jì)。例如，如果我們需要為 input[type=file] 提供一個(gè)用來(lái)綁定 File 對(duì)象的 ControlValueAccessor ，只需要在依賴注入容器中提供一個(gè) FileControlValueAccessor 的實(shí)現(xiàn)就可以了。不過(guò)，我們并不想覆蓋其他類型 input 元素的 ControlValueAccessor ，因?yàn)槟菢涌隙〞?huì)對(duì)已有代碼造成大范圍的破壞。所以在這里，我們需要使用 Angular 的分層注入能力——在 ElementInjector 中提供 FileControlValueAccessor 。關(guān)于 ElementInjector 更多的內(nèi)容，請(qǐng)看這里 a-curios-case-of-the-host-decorator-and-element-injectors-in-angular 。

下面演示的兩個(gè) Directive 您都可以在這里查看 在線演示 。

首先讓我們來(lái)創(chuàng)建一個(gè) Directive，這個(gè)指令將會(huì)選中 input[type=file][appInputFile] 元素，這樣我們就可以有選擇的為文件選擇器的 ElementInjector 定義新的 Provider。

@Directive({
  selector: 'input[type=file][inputFile]',    // <1>
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,             // <2>
      useExisting: forwardRef(() => InputFileDirective), // <3>
      multi: true   // <4>
    }
  ]
})
export class InputFileDirective implements ControlValueAccessor, OnInit, OnDestroy {
  // 當(dāng)文件選擇器選擇的文件發(fā)生改變時(shí)調(diào)用的回調(diào)函數(shù)
  onChange: (any) => any;
  // 當(dāng)文件選擇器選擇的被操作后調(diào)用的回調(diào)函數(shù)
  onTouched: () => any;

  // 監(jiān)聽宿主元素的 change 事件
  @HostListener('change', ['$event.target.files']) onElChange = (files: FileList) => {
    this.onChange(files);
  };

  // 監(jiān)聽宿主元素的 blur 事件
  @HostListener('blur', []) onElTouched = () => {
    this.onTouched();
  };

  constructor(private el: ElementRef<HTMLInputElement>) {   // <5>
  }
  ngOnInit(): void {
    this.el.nativeElement.addEventListener('change', this.listener);
  }

  // 來(lái)自 ControlValueAccessor 接口，用來(lái)設(shè)置元素的值
  writeValue(obj: any): void {
    this.el.nativeElement.value = obj;
  }
  // 來(lái)自 ControlValueAccessor 接口，用來(lái)將一個(gè)函數(shù)注冊(cè)為 onChange 回調(diào)函數(shù)
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  // 來(lái)自 ControlValueAccessor 接口，用來(lái)將一個(gè)函數(shù)注冊(cè)為 onTouched 回調(diào)函數(shù)
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  // 來(lái)自 ControlValueAccessor 接口，設(shè)置表單元素是否啟用
  setDisabledState?(isDisabled: boolean): void {
    this.el.nativeElement.disabled = isDisabled;
  }

}

當(dāng)前標(biāo)題：詳解AngularForms中自定義ngModel綁定值的方式-創(chuàng)新互聯(lián)
本文來(lái)源：http://www.jbt999.com/article8/ccdiop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、品牌網(wǎng)站制作、虛擬主機(jī)、企業(yè)建站、定制開發(fā)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)