介绍
这篇文章给大家介绍如何在角中使用ControlValueAccessor创建自定义表单控件,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强> ControlValueAccessor
ControlValueAccessor是一个接口,充当角DOM API和元素之间的桥梁
ControlValueAccessor是一个连接表单模型和视图(DOM元素)的接口,自定义的表单控件必须实现这个接口,它的作用是:
<李> 把形式模型中值映射到视图中
<李> 当视图发生变化时,通知形式指令或表单控件
角引入这个接口的原因是,不同的输入控件数据更新方式是不一样的,例如,对于我们常用的文本输入框来说,我们是设置它的价值值,而对于复选框(复选框)我们是设置它的检查属性。实际上,不同类型的输入控件都有一个ControlValueAccessor,用来更新视图
角中常见的ControlValueAccessor有:
<李> DefaultValueAccessor——用于文本和文本区域类型的输入控件
<李> SelectControlValueAccessor——用于选择选择控件
<李> CheckboxControlValueAccessor——用复于复选框选控件
export interface ControlValueAccessor {
,writeValue (obj:有),:无效
,registerOnChange (fn:有),:无效
,registerOnTouched (fn:有),:无效
} writeValue (obj:任何)是将表单模型中的值写入视图中。
writeValue(价值:任何):,void {
,this._renderer.setProperty (this._elementRef.nativeElement, & # 39;价值# 39;,,值);
} registerOnChange (fn:任何)是一个方法,用于注册在视图中的某些内容发生更改时应调用的处理程序。它获取一个函数,告诉其他表单指令和表单控件更新其值。
registerOnChange (fn:,(_:有),=祝辞,空白):,void {=,,this._onChange fn;
} registerOnTouched (fn:任何)与registerOnChange()此类似,它专门为控件接收触摸事件时注册一个处理程序。
registerOnTouched (fn:任何):,void {=,,this._onTouched fn;
} setDisabledState吗?(isDisabled:布尔):空白;是一个可选的方法,设置自定义表单的状态
setDisabledState (isDisabled:布尔):,void {
,this._renderer.setProperty (this._elementRef.nativeElement, & # 39;残疾人# 39;,,isDisabled);
} <>强AbstractValueAccessor
我们可以把ControlValueAccessor中的方法写在一个抽象类中,不同的组件可以实现这个基类
export abstract class AbstractValueAccessor implements ControlValueAccessor {
,
,private _value: any =, & # 39; & # 39;;
,
,get 价值():any {
,return this._value;
,}
,set 价值(v:有),{
,if (v !==, this._value), {
v=this._value 才能;;
this.onChange才能(v);
this.onTouched才能();
,}
,}
,writeValue(价值:有),{=,this._value 价值;
,}=,onChange (_),=祝辞,{};
,onTouched =,(),=祝辞,{};
,registerOnChange (fn:,(_:有),=祝辞,空白):,void {=,,this.onChange fn;
,}
,registerOnTouched (fn:(),=祝辞,空白):,void {=,,this.onTouched fn;
,}
}
export function MakeProvider(类型:任何):,{,提供:任何,,useExisting:,,,多:,布尔},{
{,return ,提供:NG_VALUE_ACCESSOR,, useExisting:, forwardRef((),=祝辞,类型),,多:,true };
} 关于如何在角中使用ControlValueAccessor创建自定义表单控件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
