详解Angular Forms中自定义ngModel绑定值的方式
在 Angular 应用中，我们有两种方式来实现表单绑定——“模板驱动表单”与“响应式表单”。这两种方式通常能够很好的处理大部分的情况，但是对于一些特殊的表单控件，例如 input[type=datetime] 、 input[type=file] ，我们需要重写默认的表单绑定方式，让我们绑定的变量不再仅仅只是一个字符串，而是一个 Date 或者 File 对象。为了达成这一目的，我们需要自定义表单控件的 ControlValueAccessor 。
ControlValueAccessor 接口是 Angular Forms API 与 DOM 之间的桥梁，通过提供不同的 ControlValueAccessor ，我们就可以使用统一的 Angular Forms API 来操作不同的 HTML 表单元素。
在我们使用 ngModel 或者 formControl 的时候，这两个 Directive 会向 Angular 的依赖注入容器申请实现了 ControlValueAccessor 接口的对象，这是一种典型的面向接口编程的设计。例如，如果我们需要为 input[type=file] 提供一个用来绑定 File 对象的 ControlValueAccessor ，只需要在依赖注入容器中提供一个 FileControlValueAccessor 的实现就可以了。不过，我们并不想覆盖其他类型 input 元素的 ControlValueAccessor ，因为那样肯定会对已有代码造成大范围的破坏。所以在这里，我们需要使用 Angular 的分层注入能力——在 ElementInjector 中提供 FileControlValueAccessor 。关于 ElementInjector 更多的内容，请看这里 。
狼蚁网站SEO优化演示的两个 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>
}
]
})
export class InputFileDirective implements ControlValueAccessor, 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(private el: ElementRef<HTMLInputElement>) { // <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> 的注释，这是我用来在狼蚁网站SEO优化的文章中引用该行代码的标记，语法借鉴自 ASCIIDoc
- 通过定义一个复合的选择器，我们可以有选择的对
input[type=file]重写ControlValueAccessor ControlValueAccessor的注入 token 是一个常量 ——NG_VALUE_ACCESSOR- 由于 Directive 的定义在这行代码的狼蚁网站SEO优化，所以需要使用
forwardRef来引用这个依赖的实现。 - 这里需要将 multiple 设置为 true，因为 Angular 默认的
ControlValueAccessor就是提供了多个实现的。在解析依赖的时候，Angular 会优先选择我们自定义的实现。 - 为了代码更加简单，我在这里选择了不利于服务端渲染的
ElementRef.nativeElement来读取原生 HTML 元素的属性，如果你对服务端渲染有需求，你应该使用Renderer2来读写元素的属性。
有了这个 Directive，我们就可以在 Angular Forms 中绑定 File 对象了：
<input type="file" [(ngModel)]="foo.files" inputFile />
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
}
]
})
export class DateValueDirective implements ControlValueAccessor {
/**
* See https://date-fns.org/v2.0.0-alpha.25/docs/format
* 自定义日期展示格式
* @type {string}
* @memberof DateValueDirective
*/
// tslint:disable-next-line:no-input-rename
@Input('valueAsDate') format: string;
private dateValue: Date;
@HostListener('input', ['$event.target.value']) onChange = (_: any) => { };
@HostListener('blur', []) onTouched = () => { };
get element() { return this.elementRef.nativeElement; }
constructor(
private elementRef: ElementRef,
private renderer: Renderer2 // <1>
) { }
parseDate(str: string) {
return parseDate(str, this.format, new Date(), { awareOfUnicodeTokens: true });
}
formatDate(date: Date) {
return formatDate(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 {
const onChange = (value: string) => {
const date = 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 对象进行双向绑定。
<input type="datetime" valueAsDate="M/d/yyyy h:mm:ss a" [(ngModel)]="foo.date">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。