详解Angular Forms中自定义ngModel绑定值的方式


Posted in Javascript onDecember 10, 2018

在 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;
  }

}

上面的代码片段中你可以看到有几处类似 // <1> 的注释,这是我用来在下面的文章中引用该行代码的标记,语法借鉴自 ASCIIDoc

  1. 通过定义一个复合的选择器,我们可以有选择的对 input[type=file] 重写 ControlValueAccessor
  2. ControlValueAccessor 的注入 token 是一个常量 —— NG_VALUE_ACCESSOR
  3. 由于 Directive 的定义在这行代码的下面,所以需要使用 forwardRef 来引用这个依赖的实现。
  4. 这里需要将 multiple 设置为 true,因为 Angular 默认的 ControlValueAccessor 就是提供了多个实现的。在解析依赖的时候,Angular 会优先选择我们自定义的实现。
  5. 为了代码更加简单,我在这里选择了不利于服务端渲染的 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">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript小数四舍五入多种方法实现
Dec 23 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
原生js+ajax分页组件
Jan 30 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 #jQuery
微信小程序与后台PHP交互的方法实例分析
Dec 10 #Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 #Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 #jQuery
发布Angular应用至生产环境的方法
Dec 10 #Javascript
webpack优化的深入理解
Dec 10 #Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 #Javascript
You might like
基于PHP中的常用函数回顾
2013/07/11 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
JS定时器实例
2013/04/17 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Python正则表达式和re库知识点总结
2019/02/11 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
思想品德自我鉴定
2013/10/12 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
幸福终点站观后感
2015/06/04 职场文书
团结友爱主题班会
2015/08/13 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
Spring 使用注解开发
2022/05/20 Java/Android
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server