angular4自定义表单控件[(ngModel)]的实现

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

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

interface ControlValueAccessor { 
 writeValue(obj: any): void
 registerOnChange(fn: any): void
 registerOnTouched(fn: any): void
 setDisabledState(isDisabled: boolean)"htmlcode">

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)"text-align: center">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。