在角应用中,我们有两种方式来实现表单绑定——“模板驱动表单”与“响应式表单”。这两种方式通常能够很好的处理大部分的情况,但是对于一些特殊的表单控件,例如输入(type=datetime),输入类型=文件,我们需要重写默认的表单绑定方式,让我们绑定的变量不再仅仅只是一个字符串,而是一个日期或者文件对象。为了达成这一目的,我们需要自定义表单控件的ControlValueAccessor。
ControlValueAccessor接口是角Forms API与DOM之间的桥梁,通过提供不同的ControlValueAccessor,我们就可以使用统一的角Forms API来操作不同的HTML表单元素。
在我们使用ngModel或者formControl的时候,这两个指令会向角的依赖注入容器申请实现了ControlValueAccessor接口的对象,这是一种典型的面向接口编程的设计,例如,如果我们需要为输入[类型=文件]提供一个用来绑定文件对象的ControlValueAccessor,只需要在依赖注入容器中提供一个FileControlValueAccessor的实现就可以了。不过,我们并不想覆盖其他类型输入元素的ControlValueAccessor,因为那样肯定会对已有代码造成大范围的破坏。所以在这里,我们需要使用角的分层注入能力,在ElementInjector中提供FileControlValueAccessor。关于ElementInjector更多的内容,请看这里a-curios-case-of-the-host-decorator-and-element-injectors-in-angular。
下面演示的两个指令您都可以在这里查看在线演示。
首先让我们来创建一个指令,这个指令将会选中<代码>输入[类型=文件][appInputFile] 代码>元素,这样我们就可以有选择的为文件选择器的ElementInjector定义新的提供者。
@Directive ({ 选择器:“输入[类型=文件][inputFile] ',//& lt; 1比; 供应商:[ { 提供:NG_VALUE_ACCESSOR,//& lt; 2比; useExisting: forwardRef(()=比;InputFileDirective)//& lt; 3比; 多:真//& lt; 4比; } ] }) 出口类InputFileDirective实现ControlValueAccessor> & lt;输入类型=拔募盵(ngModel)]=" foo。文件“inputFile/祝辞
日期类型的数据也是日常开发中比较头疼的一个地方,因为在JSON中,日期类型往往会被序列化为字符串,而在前端代码中,我们又需要将其反序列化为日期对象,最终在页面上展示的时候,我们又需要按照产品需求再将其序列化为制定格式的字符串。现在,有了<代码> ControlValueAccessor> 代码的帮助,我们就可以实现让输入(type=datetime) <代码> 代码>与<代码> 代码>日期对象进行双向绑定的功能,同时还能够定制日期对象在输入框中的显示格式。
@Directive ({//tslint: disable-next-line: directive-selector 选择器:“输入(type=datetime) [valueAsDate]”, 供应商:[ { 提供:NG_VALUE_ACCESSOR, useExisting: forwardRef(()=比;DateValueDirective), 多:真 } ] }) 出口类DateValueDirective实现ControlValueAccessor {/* * *参见https://date-fns.org/v2.0.0-alpha.25/docs/format *自定义日期展示格式 * @type{字符串} * @memberof DateValueDirective *///tslint: disable-next-line: no-input-rename @Input (valueAsDate)格式:字符串; 私人dateValue:日期; @HostListener(“输入”,[' event.target.value美元'])> & lt;输入类型=癲atetime”valueAsDate=癕/d/yyyy h: mm: ss“[(ngModel)]=癴oo.date”在
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。