自定义 ngModel - Javascript

在Angular中，ngModel是一个指令，用于实现双向数据绑定。它使我们能够将表单控件中的值与组件中的属性进行绑定。

但是，有时候我们需要自定义ngModel指令，以满足特定的需求。在这篇文章中，我将向你展示如何自定义ngModel指令。

首先创建一个指令

我们可以使用Angular CLI来创建自定义指令。在终端中运行以下命令：

ng generate directive my-ngmodel

这将在src/app目录下生成一个名为my-ngmodel的文件夹，并且自动生成一些必需的文件。其中，my-ngmodel.directive.ts是自定义指令的主要代码文件。

实现自定义ngModel

我们需要实现指令的带有两个绑定器的属性：

• ngModel - 用于实现双向数据绑定的值。
• ngModelChange - 一个触发ngModel变化的事件函数。

@Input('ngModel') model: any;
@Output('ngModelChange') update: EventEmitter<any> = new EventEmitter();

在指令中，我们需要通过实现ControlValueAccessor进行自定义ngModel的实现。这是一个接口，它将把我们的自定义指令链接到NgModel指令，使我们能够实现双向数据绑定。

import { Directive, ElementRef, Renderer2, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const DEFAULT_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => MyNgModelDirective),
  multi: true
};

@Directive({
  selector: '[myNgModel]',
  providers: [DEFAULT_VALUE_ACCESSOR]
})
export class MyNgModelDirective implements ControlValueAccessor {
  @Input('myNgModel') model: any;
  @Output() myNgModelChange = new EventEmitter();

  constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {}

  /**
    ** ControlValueAccessor interface - START
    **/

  writeValue(value: any) {
    this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
  }

  registerOnChange(fn: any) {
    this.onChange = (value) => {
      fn(value);
      this.myNgModelChange.emit(value);
    };
  }

  registerOnTouched(fn: any) {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean) {
    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  }

  /**
    ** ControlValueAccessor interface - END
    **/

  onChange(value: any) {}
  onTouched() {}
}

在上面的代码中，我们实现了ControlValueAccessor接口，在其中定义了4个函数：

• writeValue：用于在标记元素上设置值。
• registerOnChange：用于在属性绑定时在组件之间进行双向数据绑定。
• registerOnTouched：用于跟踪用户是否已经访问了该控件。
• setDisabledState：用于切换禁用状态。

我们的自定义ngModel指令现在已经准备好了，现在我们只需要在模板中使用它即可。

<input type="text" myNgModel [(ngModel)]="myModel" />

总结

在本教程中，我们看到了如何自定义ngModel指令，并通过ControlValueAccessor接口实现了双向数据绑定。这为我们更好地控制表单控件中的值提供了更多的自由度。