Angular学习笔记(五)--- 自定义表单控件

本文简单介绍封装使用ngModel实现自定义表单控件的过程。

NgModel 相关

NgModel

NgModel用于从作用域创建一个FormControl实例,并将它绑定到一个表单控件元素。

  • [ngModel]: 单向绑定,作用域变更将同步到UI中
  • [(ngModel)]: 双向绑定,UI模板的变更页将同步到作用域中

ngModel继承自NgControl

NgControl

NgControl是所有控制指令继承的基础类。它将一个FormControl绑定到DOM元素中。

FormControlFormGroupFormArray,三者都用于angular表单的值和状态的跟踪,区别是一个控件、一组控件或者是它们的组合。

FormControl用于跟踪一个单独的表单控件的值和有效性状态。它对应一个HTML表单控件,不如输入框和下拉框。
FormGroup用于跟踪一组AbstractControl的实例的值和有效性状态。该组的属性中包含了它的子控件。组件中的顶级表单就是一个FormGroup
FormArray用于跟踪AbstractControl实例组成的有序数组的值和有效性状态。

ControlValueAccessor

ControlValueAccessor用于在控制和原生元素之间建立联系,它封装了赋值到一个表现为input元素的DOM元素。

简单说,就是angular中的input是带有[(ngModel)]这个属性的,而我们想要自己控制这个input的写入过程,使用ControlValueAccessor就可以做到。

ControlValueAccessor提供以下接口:

  • writeValue(obj: any) : void: 写入值到元素
  • registerOnChange(fn: any) : void: 设置当控件接收到change事件时触发的回调
  • registerOnTouched(fn: any) : void: 设置当控件接收到touch事件时触发的回调
  • setDisabledState(isDisabled: boolean) : void: 该函数将在控件状态或者disabled值变化,根据值来对元素启用或失效

DefaultValueAccessor

DefaultValueAccessor提供值写入和监听变化的默认访问,像NgModel, FormControlDirective, 和FormControlName指令会使用。

DefaultValueAccessor提供类包括:

  • onChange : (_: any) => {} change事件变化监听
  • onTouched : () => {} touch事件变化监听

以及ControlValueAccessor(上面)的接口。

NG_VALUE_ACCESSOR

NG_VALUE_ACCESSOR提供一个ControlValueAccessor供表单控制使用。

创建自定义input控件

我们想要封装后的组件跟原生的angular组件一样,像表现为input的自定义控件,我们想要使用[(ngModel)]来进行双向绑定,我们需要使用ControlValueAccessor来拓展。

而这里ControlValueAccessor只是一个接口,我们应用它,还需要获取一些可用的服务,这时候需要注入NG_VALUE_ACCESSOR

{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInputComponent),
    multi: true
};

这里简单讲讲几个概念:

  • 我们自定义了一个访问控制服务,该服务包装为NG_VALUE_ACCESSOR服务,主要用于控制ControlValueAccessor相关的访问。
  • 我们需要将自定义input控件提供给NG_VALUE_ACCESSOR,以便通过自定义方式控制父组件的[(ngModel)]以及其他表单相关的访问。
  • forwardRef用于将目前还未获取到的依赖关联起来,这里我们关联后面的自定义Input组件。
@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements OnInit, ControlValueAccessor {
  /*
  * 自定义表单控件
  * 需要完成ControlValueAccessor内部的方法
  * */
  private _custom: any = '';

  // 定义ControlValueAccessor提供的事件回调
  private onChange = (_: any) => {
  };

  get custom(): any {
    return this._custom;
  }

  set custom(v: any) {
    if (v !== this._custom) {
      this._custom = v;
      this.onChange(this._custom);
    }
  }

  constructor() {
  }

  ngOnInit() {
  }

  writeValue(val: any): void {
    this._custom = val;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
  }

}

具体的实现实例参考Angular2 + Connect custom component to ngModel。

你可能感兴趣的:(Angular)