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

　　

<强> [(ngModel)]拆分

　　

<代码> [(ngModel)]> []> ()输出组合起来,进行双向数据绑定。拆分开来

　　
    　　<李>输入属性李 　　<李> <代码> [ngModel] <代码> (ngModelChange) 输出监听元素值的变化,并同步视图值与模型值。 　　
　　

代码如下:& lt;输入type=" text " id=癿odelInner”[ngModel]=澳Ｐ汀?ngModelChange)=癵etModelChange(事件)美元”在

　　 　　 　　模型:字符串; 　　构造函数(){ 　　这一点。模型=澳Ｐ统跏蓟? 　　} 　　 　　getModelChange(事件:字符串){ 　　这一点。模型=事件;//查看值与模型值同步 　　} 　　 　　

<>强自定义组件上使用[(ngModel)]

　　
我们不能把[(ngModel)]用到非表单类的原生元素或第三方自定义组件上,除非写一个合适的值访问器,这种技巧超出了本章的范围。 　　

角文档中描述到这里,就中止了。刚好我要定制一个模拟电台的组件,只能如文档所说,依葫芦画瓢实现<代码> ControlValueAccessor> 　　

<强> ControlValueAccessor接口

　　
ControlValueAccessor充当一个角之间的桥梁形式在DOM API和一个本地元素。
　　实现该接口,如果你想创建一个自定义表单控制指令,集成了角形式。 　　

简而言之,实现了这个接口的组件,就可以使用角forms API,比如<代码> (ngModel) 。

　　 　　 　　接口ControlValueAccessor { 　　writeValue (obj:任何):空白 　　registerOnChange (fn:任何):空白 　　registerOnTouched (fn:任何):空白 　　setDisabledState (isDisabled:布尔)& # 63;:空白 　　} 　　 　　

<>强实现ControlValueAccessor步骤

　　

模仿<代码> primeng> 　　

    　　<李>创建一个<代码> RADIO_VALUE_ACCESSOR 常量用来在组件中注册<代码> NG_VALUE_ACCESSOR 　　<李>实现<代码> ControlValueAccessor> 　　
　　

完整演示代码如下:

　　 　　 　　进口{NgModule、组件、输入、输出、ElementRef祝辞 　　& lt;标签类=" radio-label "(点击)="选择"按钮()* ngIf=氨昵北? 　　& lt; div类="名称" [class.checked-name]=皉b.checked”在{{标签}}& lt;/div> 　　& lt;/label> 　　& lt; div类=癶elper-hidden-accessible”比; 　　& lt;输入# rb类型=肮悴ァ盵attr.name]=[attr“名字”。值]=凹壑怠?检查)=凹觳椤北? 　　& lt;/div> 　　& lt; div类=" radio-md "(点击)=癶andleClick()在 　　& lt; div类=" radio-icon " [class.radio-checked]=皉b.checked”比; 　　& lt; div类=" radio-inner "祝辞& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　`， 　　styleUrls: [’。/p-radio.component.scss '), 　　供应商(RADIO_VALUE_ACCESSOR): 　　}） 　　出口类PRadioComponent实现ControlValueAccessor { 　　 　　@Input()名称:字符串; 　　@Input()标签:字符串; 　　@Input()值:字符串; 　　检查:布尔; 　　 　　@ViewChild (rb) inputViewChild: ElementRef; 　　@Output () pRadioChange: EventEmitter=new EventEmitter (); 　　(标签)=" text1”[(ngModel)]=" checkedValue祝辞& lt;/app-p-radio>

　　

这里<代码> checkedValue 属性就价值是模型,视图价值为<代码> PRadioComponent> PRadioComponent> 。值)。
　　

　　

当模型视图(<代码> checkedValue> PRadioComponent> writeValue (obj:任何)> checkedValue> PRadioComponent> 　　

<强> registerOnChange (fn:任何):空白

　　

这个方法的作用是同步视图价值模型和价值(视图→模型),

　　 　　 　　registerOnChange (fn:功能):空白{ 　　这一点。onModelChange=fn; 　　} 　　 　　

调用<代码> this.onModelChange() 时候,将视图价值当作参数传入此方法中,即完成了同步,此例子中<代码> this.onModelChange (this.value); 。

　　

上面两种方法是相对的: