没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
3页
在 Angular 应用中,我们有两种方式来实现表单绑定——“模板驱动表单”与“响应式表单”。这两种方式通常能够很好的处理大部分的情况,但是对于一些特殊的表单控件,例如 input[type=datetime] 、 input[type=file] ,我们需要重写默认的表单绑定方式,让我们绑定的变量不再仅仅只是一个字符串,而是一个 Date 或者 File 对象。为了达成这一目的,我们需要自定义表单控件的 ControlValueAccessor 。 ControlValueAccessor 接口是 Angular Forms API 与 DOM 之间的桥梁,通过提供不同的 ControlVa
资源详情
资源评论
资源推荐
详解详解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 更多的内容,请看这里 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>
}
] })
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;
}
weixin_38617335
- 粉丝: 7
- 资源: 918
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0