自定義表單控件 [(ngModel)]

[(ngModel)]拆分

[(ngModel)] 將[]輸入()輸出組合起來，進行雙向數據綁定。拆分開來

1. 輸入屬性[ngModel]
2. (ngModelChange)輸出監聽元素值的變化，並同步view value與model value。

<input type="text" id="modelInner" [ngModel]="model" (ngModelChange)="getModelChange($event)">

model: string;
    constructor() {
        this.model = 'model init';
    }

    getModelChange(event: string) {
        this.model = event;  // view value 與 model value 同步
    }

自定義組件上使用 [(ngModel)]

咱們不能把[(ngModel)]用到非表單類的原生元素或第三方自定義組件上，除非寫一個合適的值訪問器，這種技巧超出了本章的範圍。

Angular文檔中描述到這裏，就停止了。恰好我要定製一個模擬radio的組件，只能如文檔所說，依葫蘆畫瓢實現 ControlValueAccessor。

ControlValueAccessor接口

ControlValueAccessor acts as a bridge between the Angular forms API and a native element in the DOM.
Implement this interface if you want to create a custom form control directive that integrates with Angular forms.

簡而言之，實現了這個接口的組件，就能夠使用 Angular forms API，好比[(ngModel)] 。

interface ControlValueAccessor { 
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

實現ControlValueAccessor步驟

模仿primeng中的自定義radio組件，寫了一個簡單的自定義radio組件。

1. 建立一個RADIO_VALUE_ACCESSOR常量用來在組件中註冊NG_VALUE_ACCESSOR
2. 實現ControlValueAccessor中的3+1個方法

完整demo代碼以下：

import { NgModule, Component, Input, Output, ElementRef, OnInit, EventEmitter, forwardRef, ViewChild, ChangeDetectorRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const RADIO_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => PRadioComponent),
  multi: true
};

@Component({
  selector: 'app-p-radio',
  template: `
        <div class="p-radio">
            <label class="radio-label" (click)="select()" *ngIf="label">
                <div class="name" [class.checked-name]="rb.checked">{{label}}</div>
            </label>
            <div class="helper-hidden-accessible">
                <input #rb type="radio" [attr.name]="name" [attr.value]="value" [checked]="checked">
            </div>
            <div class="radio-md" (click)="handleClick()">
                <div class="radio-icon " [class.radio-checked]="rb.checked">
                     <div class="radio-inner"></div>
                </div>
            </div>
        </div>
    `,
  styleUrls: ['./p-radio.component.scss'],
  providers: [RADIO_VALUE_ACCESSOR]
})
export class PRadioComponent implements ControlValueAccessor {

  @Input() name: string;
  @Input() label: string;
  @Input() value: string;
  checked: boolean;

  @ViewChild('rb') inputViewChild: ElementRef;
  @Output() pRadioChange: EventEmitter<any> = new EventEmitter();
  onModelChange: Function = () => { };

  constructor(
    private cd: ChangeDetectorRef
  ) { }

  // model view -> view value
  writeValue(value: any): void {
    if (value) {
      this.checked = (value === this.value);
      if (this.inputViewChild.nativeElement) {
        this.inputViewChild.nativeElement.checked = this.checked;
      }
      this.cd.markForCheck();
    }
  }

  // view value ->model value
  registerOnChange(fn: Function): void {
    this.onModelChange = fn;
  }

  registerOnTouched(fn: Function): void { }

  handleClick() {
    this.select();
  }

  select() {
    this.inputViewChild.nativeElement.checked = !this.inputViewChild.nativeElement.checked;
    this.checked = !this.checked;
    if (this.checked) {
      this.onModelChange(this.value); // 同步view value 和 model value
    } else {
      this.onModelChange(null);
    }
    this.pRadioChange.emit(null);
  }

}

@NgModule({
  imports: [CommonModule],
  exports: [PRadioComponent],
  declarations: [PRadioComponent]
})

export class RadioButtonModule { }

方法什麼時候被調用？

writeValue(obj: any): void

API中提到 (model -> view) 時，writeValue() 會被調用。
model value 和 view value分別指什麼？
舉個調用PRadioComponent的例子：

<app-p-radio [value]="'1'" [label]="'text1'" [(ngModel)]="checkedValue"></app-p-radio>

這裏checkedValue屬性就是model value，view value 爲PRadioComponent內部的某個屬性（PRadioComponent中定義爲this.value）。
當model view（checkedValue）發生改變時，PRadioComponent中的writeValue(obj: any)就會被調用，參數爲當前model value（checkedValue）的值，在函數中將參數值賦給內部的view value，從而實現(model -> view)。接受到model value的值後，改變PRadioComponent的UI顯示。

registerOnChange(fn: any): void

這個方法的做用是同步 view value 和 model value (view -> model)，

registerOnChange(fn: Function): void {
    this.onModelChange = fn;
  }

調用this.onModelChange()時候，將view value看成參數傳入此方法中，即完成了同步，此例子中this.onModelChange(this.value);。

上面兩種方法是相對的：

• writeValue(obj: any): model value發生改變 ，完成後UI發生改變(model value-> view value)
• registerOnChange(fn: any): 觸發事件（好比click），view value和UI發生改變，完成調用後model value與view value同步(view value-> model value)

registerOnTouched(fn: any): void

setDisabledState(isDisabled: boolean)?: void

目的只爲在控件中簡單的使用[(ngModel)]，因此這兩個方法沒有用到。registerOnTouched(fn: any)必須實現，因此定義了一個空函數。

實際效果

初始值爲'a'，點擊改變view value，在Angury調試工具中看到值改成'b'。而後在調試工具中將checkedValue改成'a'，視圖發生了改變。可見，完成了數據的雙向綁定。