详解Angular Forms中自定义ngModel绑定值的方式
在Angular应用中，我们有两种方式来实现表单绑定——“模板驱动表单”与“响应式表单”。这两种方式通常能够很好的处理大部分的情况，但是对于一些特殊的表单控件，例如input[type=datetime]、input[type=file]，我们需要重写默认的表单绑定方式，让我们绑定的变量不再仅仅只是一个字符串，而是一个Date或者File对象。为了达成这一目的，我们需要自定义表单控件的ControlValueAccessor。
ControlValueAccessor接口是AngularFormsAPI与DOM之间的桥梁，通过提供不同的ControlValueAccessor，我们就可以使用统一的AngularFormsAPI来操作不同的HTML表单元素。
在我们使用ngModel或者formControl的时候，这两个Directive会向Angular的依赖注入容器申请实现了ControlValueAccessor接口的对象，这是一种典型的面向接口编程的设计。例如，如果我们需要为input[type=file]提供一个用来绑定File对象的ControlValueAccessor，只需要在依赖注入容器中提供一个FileControlValueAccessor的实现就可以了。不过，我们并不想覆盖其他类型input元素的ControlValueAccessor，因为那样肯定会对已有代码造成大范围的破坏。所以在这里，我们需要使用Angular的分层注入能力——在ElementInjector中提供FileControlValueAccessor。关于ElementInjector更多的内容，请看这里a-curios-case-of-the-host-decorator-and-element-injectors-in-angular。
下面演示的两个Directive您都可以在这里查看在线演示。
首先让我们来创建一个Directive，这个指令将会选中input[type=file][appInputFile]元素，这样我们就可以有选择的为文件选择器的ElementInjector定义新的Provider。
@Directive({
selector:'input[type=file][inputFile]',//<1>
providers:[
{
provide:NG_VALUE_ACCESSOR,//<2>
useExisting:forwardRef(()=>InputFileDirective),//<3>
multi:true//<4>
}
]
})
exportclassInputFileDirectiveimplementsControlValueAccessor,OnInit,OnDestroy{
//当文件选择器选择的文件发生改变时调用的回调函数
onChange:(any)=>any;
//当文件选择器选择的被操作后调用的回调函数
onTouched:()=>any;
//监听宿主元素的change事件
@HostListener('change',['$event.target.files'])onElChange=(files:FileList)=>{
this.onChange(files);
};
//监听宿主元素的blur事件
@HostListener('blur',[])onElTouched=()=>{
this.onTouched();
};
constructor(privateel:ElementRef){//<5>
}
ngOnInit():void{
this.el.nativeElement.addEventListener('change',this.listener);
}
//来自ControlValueAccessor接口，用来设置元素的值
writeValue(obj:any):void{
this.el.nativeElement.value=obj;
}
//来自ControlValueAccessor接口，用来将一个函数注册为onChange回调函数
registerOnChange(fn:any):void{
this.onChange=fn;
}
//来自ControlValueAccessor接口，用来将一个函数注册为onTouched回调函数
registerOnTouched(fn:any):void{
this.onTouched=fn;
}
//来自ControlValueAccessor接口，设置表单元素是否启用
setDisabledState?(isDisabled:boolean):void{
this.el.nativeElement.disabled=isDisabled;
}
}
上面的代码片段中你可以看到有几处类似//<1>的注释，这是我用来在下面的文章中引用该行代码的标记，语法借鉴自ASCIIDoc
- 通过定义一个复合的选择器，我们可以有选择的对input[type=file]重写ControlValueAccessor
- ControlValueAccessor的注入token是一个常量——NG_VALUE_ACCESSOR
- 由于Directive的定义在这行代码的下面，所以需要使用forwardRef来引用这个依赖的实现。
- 这里需要将multiple设置为true，因为Angular默认的ControlValueAccessor就是提供了多个实现的。在解析依赖的时候，Angular会优先选择我们自定义的实现。
- 为了代码更加简单，我在这里选择了不利于服务端渲染的ElementRef.nativeElement来读取原生HTML元素的属性，如果你对服务端渲染有需求，你应该使用Renderer2来读写元素的属性。
有了这个Directive，我们就可以在AngularForms中绑定File对象了：
Date类型的数据也是日常开发中比较头疼的一个地方，因为在JSON中，Date类型往往会被序列化为字符串，而在前端代码中，我们又需要将其反序列化为Date对象，最终在页面上展示的时候，我们又需要按照产品需求再将其序列化为制定格式的字符串。现在，有了ControlValueAccessor的帮助，我们就可以实现让input[type=datetime]与Date对象进行双向绑定的功能，同时还能够定制Date对象在输入框中的显示格式。
@Directive({
//tslint:disable-next-line:directive-selector
selector:'input[type=datetime][valueAsDate]',
providers:[
{
provide:NG_VALUE_ACCESSOR,
useExisting:forwardRef(()=>DateValueDirective),
multi:true
}
]
})
exportclassDateValueDirectiveimplementsControlValueAccessor{
/**
*Seehttps://date-fns.org/v2.0.0-alpha.25/docs/format
*自定义日期展示格式
*@type{string}
*@memberofDateValueDirective
*/
//tslint:disable-next-line:no-input-rename
@Input('valueAsDate')format:string;
privatedateValue:Date;
@HostListener('input',['$event.target.value'])onChange=(_:any)=>{};
@HostListener('blur',[])onTouched=()=>{};
getelement(){returnthis.elementRef.nativeElement;}
constructor(
privateelementRef:ElementRef,
privaterenderer:Renderer2//<1>
){}
parseDate(str:string){
returnparseDate(str,this.format,newDate(),{awareOfUnicodeTokens:true});
}
formatDate(date:Date){
returnformatDate(date,this.format,{awareOfUnicodeTokens:true});
}
/**
*设置组件的值的时候，先把新的值存到一个成员变量中，然后再把新的值格式化为string
*/
writeValue(date:Date):void{
this.dateValue=date;
this.renderer.setProperty(this.element,'value',this.formatDate(date));
}
/**
*在input元素值发生变化的时候，先尝试把变化后的值转换成Date对象
*如果转换失败，那么依然使用之前的值
*否则，将新的值传递给回调函数
*/
registerOnChange(fn:any):void{
constonChange=(value:string)=>{
constdate=this.parseDate(value);
if(isValidDate(date)){
this.dateValue=date;
fn(date);
}else{
fn(this.dateValue);
}
};
this.onChange=onChange;
}
registerOnTouched(fn:any):void{
this.onTouched=fn;
}
setDisabledState?(isDisabled:boolean):void{
this.renderer.setProperty(this.element,'disabled',isDisabled);
}
}
这里演示了使用Renderer2来读写元素属性的操作
整个指令的内容仍然非常简单，但是却能够为我们的日常开发带来不小的便利，使用了这个指令后，我们就可以非常容易的为Date对象进行双向绑定。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。