当前位置:首页 >> 网络编程

详解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"htmlcode">
<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"htmlcode">
<input type="datetime" valueAsDate="M/d/yyyy h:mm:ss a" [(ngModel)]="foo.date">

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