微客导航 » 文章资讯 » Angular封装表单控件及思想总结

Angular封装表单控件及思想总结

2023-08-04 17:54:05 458

前言

前端框架的强大无疑给开发者省去了不少烦恼，又因比较完善的UI库支撑，让部分后端开发者能够省去大量样式设计的时间成本，纵然如此，业务的多变性是框架本身无法预料的，很多的控件功能在实际开发中总是不够完善和灵活，所以需要开发者结合业务需求进行再次封装这些UI控件/组件。

表单控件

常规组件只需要根据官方指引，写好数据传输的方式和订阅即可任意使用，表单控件有点特殊，按照常规方式写出来的组件使用在表单中，绑定ngModel或者formControlName，随之而来的是一个报错：

RRORError:Novalueaccessorforformcontrolwithname:'userName'

ControlValueAccessor

DefinesaninterfacethatactsasabridgebetweentheAngularformsAPIandanativeelementintheDOM

只有实现了这个接口才可以完成像普通表单元素那样使用和验证。

interfaceControlValueAccessor{
writeValue(obj:any):void
registerOnChange(fn:any):void
registerOnTouched(fn:any):void
setDisabledState(isDisabled:boolean)?:void
}

你的控件必须包含上述方法；此外，控件内部要有value的get实现，以及最好有个与value等值的别名变量（想不明白别急，看代码）；一个简单的input控件封装应该类似这样：

exportclassMyInputComponentimplementsOnInit,ControlValueAccessor{
value:string|number;
@Input()disabled:boolean;
@Input()placeholder:string;
@Input()type='text';
constructor(){}

ngOnInit(){
}
writeValue(data:any){
this.value=data;
}
registerOnChange(fn:any){

}
registerOnTouched(fn:any){

}
setDisabledState(disabled:boolean){
this.disabled=disabled;
}

}

其实封装工作只完成一半，组件装饰器元数据完整：

@Component({
//tslint:disable-next-line:component-selector
selector:'my-input',
templateUrl:'./my-input.component.html',
styleUrls:['./my-input.component.scss'],
providers:[{
provide:NG_VALUE_ACCESSOR,
useExisting:forwardRef(()=>MyInputComponent),
multi:true
}]
})

至此，控件在form表单中使用不会报错；表单内放置一个查询按钮，用来输出表单状态：





userName

查询

ngOnInit(){
this.form=this.fb.group({
userName:[2]
});
}
submit(form:FormGroup){
console.log(form);
}

封装控件内部：

通过formControlName的绑定方式将userName传入控件，控件通过writeValue方法接收并赋值到自身属性value，用于与原生input交互，此时我们手动输入内容为数字3，然后打印：

可以看到表单没有获取到最新的值，这是因为目前位置表单获取组件的value还是初始值，我们也没有提供改变value的方法机制，修改html：

这里稍微解释input绑定数据与触发的更新方法可以选择原生的value和input进行更新，也可以选择ng提供的ngModel和ngModelChange事件更新控件，区别在于使用原生input的输入事件，要使用到事件对象展开找到元素的value属性值；而使用ng官方框架自带的事件，事件对象$event就是最新的value值。

新增setvalue方法：

setvalue(data){
this.actualValue=data;
//通知表单value更新
this.onChange(data);
}
registerOnChange(fn:any){
//注册表单的value改变通知方法
this.onChange=fn;
}
modelChange(event){
this.value=event;
}

输入3，查询打印：

实现原生input基础属性

这个几乎是一条默认的规则，封装的控件至少实现原生input的基础属性功能，在此基础上再进行满足业务需求。

type
maxlength
minlength
placeholder
......

这里只讨论type为text和number的情况，radio等其它类型没必要深入。

我们不能直接使用maxlength进行与input绑定，至少写法不是很好,比较妥善的做法是动态的判断长度值，并且将正确的值设置到原生input属性中。

为此修改html：

注入Renderer2，用于对原生元素操作

ngOnChanges(changes:SimpleChanges){
this.initAttributes(changes);
}
initAttributes(changes:SimpleChanges){
for(constkeyinchanges){
if(changes.hasOwnProperty(key)){
constelement=changes[key];
if(element){
this.render2.setProperty(this.inputElement.nativeElement,key,element.currentValue);
}
}
}
}

Validator

ngOnInit(){
this.form=this.fb.group({
userName:[2,[Validators.required,Validators.minLength(3)]]
});
}

经过打印测试，表单的状态正确√

适当使用指令

假如此时需要对输入内容拦截处理，目前在不写input事件的情况下无法做到，假如针对一个type=number类型的输入框，设置最大值，超过这个值不会改变,原生input元素确实有max属性支撑验证，但是它无法改变value值，也就是说假如这个最大值不是必要验证属性，那么表单还是可以提交最新的超出值，用指令可以拦截处理。

import{Directive,ElementRef,HostListener,Renderer2,Input}from'@angular/core';

@Directive({
selector:'[appInput]',
})
exportclassInputDirective{
constructor(
privateel:ElementRef,
privaterender:Renderer2
){
//添加预设class
render.addClass(this.el.nativeElement,'my-input');
}
@HostListener('input')onInputChange(){
constelement=this.el.nativeElement;
if(element.max&&Number(element.value)>=Number(element.max)){
this.render.setProperty(element,'value',element.max);
}
}
}

表单验证测试：

form表单拿到的值还是输入的非法值，这是因为模型值与原生元素之间没有真正的做到统一一致，

指令中核心代码修改：

@Output()valueChange=newEventEmitter();
@HostListener('input')onInputChange(){
constelement=this.el.nativeElement;
if(element.max&&Number(element.value)>=Number(element.max)){
this.render.setProperty(element,'value',element.max);
this.valueChange.emit(element.value);
}
}

在input标签上添加事件监听(valueChange)="onValueChange($event)"

onValueChange(event){
this.modelChange(event);
}

表单获取的值与原生控件的value一致，一般自行封装原生控件还需要加入自己的样式，甚至有时候我们封装的主要目的就是美化样式，动态添加class示例：

@Directive({
selector:'[appInput]',
//tslint:disable-next-line:no-host-metadata-property
host:{
'[class.my-input-disabled]':'disabled'
}
})
exportclassInputDirective{
constructor(
privateel:ElementRef,
privaterender:Renderer2
){
//添加预设class
render.addClass(this.el.nativeElement,'my-input');
}
@Input()@InputBoolean()disabled=false;
@Output()valueChange=newEventEmitter();
@HostListener('input')onInputChange(){
constelement=this.el.nativeElement;
if(element.max&&Number(element.value)>=Number(element.max)){
this.render.setProperty(element,'value',element.max);
this.valueChange.emit(element.value);
}
console.log(element.value);
}
}

结尾：总结下封装表单控件的原则：

1.原生控件支持的属性机制理论上需要全部保留实现（特别针对某业务封装除外）；

2.不涉及复杂的数据处理、判断等逻辑的优先使用指令处理，例如本例中input的大多数功能都可以不做封装，原生标签input已经很完善；

3.get和set方法必须体现，且要保持模型数据与原生元素的value一致，外部操作可以更改组件属性，是否需要监听属性变化作出相应处理根据空间类型和业务进行斟酌；

4.一定要使用form表单提交功能去验证，原生form配合name和label

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。

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

返回顶部
3162201930
czq8825@qq.com

Angular封装表单控件及思想总结

热门推荐

随机推荐