详解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的函数
Jan 31 Javascript
js tab 选项卡
Apr 26 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
jQuery限制图片大小的方法
May 25 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 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 Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
nginx下安装php7+php5
2016/07/31 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
关于VPN
2012/06/10 面试题
华为python面试题
2016/05/03 面试题
集体备课反思
2014/02/12 职场文书
设备售后服务承诺书
2014/05/30 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL