angula4.x的自定义表单组件

angular6的form具有强大的表单验证功能，那么如何自己开发带有表单功能的组件呢？

1.注册表单ControlValueAccessor 接口

ControlValueAccessor 类的内容

interface ControlValueAccessor {

 writeValue(obj: any): void  //model到view

 registerOnChange(fn: any): void //view到model

 registerOnTouched(fn: any): void //同上 

 setDisabledState(isDisabled: boolean)?: void // 禁用开关

}

 

@Component({
    selector: 'demo-select',
    ...
    providers: [{
    provide:NG_VALUE_ACCESSOR,
    useExisting: forwardRef(()=>{DemoSelect})，//组件名称
    multi:true
}]
})

 2.实现 

writeValue(vale)：void{//model初始化值的时候需要更新view

if(value){    //value 非空验证

this.value = value

}

}

registerOnChange(fn:Function):void{

this.controlChange = fn;

}

 

 

registerOnTouched(fn:Function):void{

this.controlTouch = fn;

}

private controlChange: Function=()=>{};

private controlTouch: Function=()=>{};

 

每当value发生变化即 view视图改变时必须调用

this.controlChange(this.value);

基本步骤就完成了，至于具体使用，直接参照其他angular正常的表单控件。