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

[(ngmodel)]拆分

[(ngmodel)] 将[]输入()输出组合起来，进行双向数据绑定。拆分开来

• 输入属性
• [ngmodel](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组件。

• 创建一个radio_value_accessor常量用来在组件中注册ng_value_accessor
• 实现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'，视图发生了改变。可见，完成了数据的双向绑定。

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