微客导航 » 文章资讯 » 如何编写一个完整的Angular4 FormText 组件

如何编写一个完整的Angular4 FormText 组件

2023-09-20 21:10:22 278

本文主要介绍了如何编写一个完整的Angular4FormText组件，分享给大家，也给自己留个笔记

组件定义

import{Component,Output,Input,forwardRef,EventEmitter}from'@angular/core';
import{ControlValueAccessor,NG_VALUE_ACCESSOR}from'@angular/forms';

@Component({
selector:'form-text',
template:`

{{label}}：


`,
providers:[
{
provide:NG_VALUE_ACCESSOR,
useExisting:forwardRef(()=>FormTextComponent),
multi:true
}
]
})
exportclassFormTextComponentimplementsControlValueAccessor{

@Input()label:string='';
@Input()placeholder:string='';

@Output()onChange:EventEmitter=newEventEmitter();

publicinnerValue:any;
publicchangeFn:Function=()=>{};


getvalue():any{
returnthis.innerValue;
};

setvalue(v:any){
if(v!==this.innerValue){
this.innerValue=v;
this.changeFn(v);
}
}


writeValue(value:any){
if(value!==this.innerValue){
this.innerValue=value;
}
}

registerOnChange(fn:any){
this.changeFn=fn;
}

registerOnTouched(fn:any){
//
}

}

组件使用


{{mobile}}

需要注意的点：

1.需要配置组件的providers
2.需要实现ControlValueAccessor接口

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

如何编写一个完整的Angular4 FormText 组件

热门推荐

随机推荐