Angular写一个Form组件-TagInput

前端开发少不了和表单打交道; Angular中, 提供了强大的表单的支持, 响应式表单(Reactive Form) 和 模板驱动的表单(Template-driven Form) 的双向数据流给我们的开发带来了极大的便利; 借助angular, 我们除了可以使用html原生的输入控件, 也可以自定表单输入组件, 和用户更好的交互. 本文以 TagInput 组件为例, 说明在Angular中如何自定义表单组件;

可以先看下最终效果

github Page在线演示

ControlValueAccessor

自定义表单组件第一步, 实现ControlValueAccessor接口

接口定义如下:

ControlValueAccessor 接口声明

export declare interface ControlValueAccessor {
    /**
     * @description
     * Writes a new value to the element.
     *
     * This method is called by the forms API to write to the view when programmatic
     * changes from model to view are requested.
     *
     * @usageNotes
     * ### Write a value to the element
     *
     * The following example writes a value to the native DOM element.
     *
     * ```ts
     * writeValue(value: any): void {
     *   this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
     * }
     * ```
     *
     * @param obj The new value for the element
     */
    writeValue(obj: any): void;
    /**
     * @description
     * Registers a callback function that is called when the control's value
     * changes in the UI.
     *
     * This method is called by the forms API on initialization to update the form
     * model when values propagate from the view to the model.
     *
     * When implementing the `registerOnChange` method in your own value accessor,
     * save the given function so your class calls it at the appropriate time.
     *
     * @usageNotes
     * ### Store the change function
     *
     * The following example stores the provided function as an internal method.
     *
     * ```ts
     * registerOnChange(fn: (_: any) => void): void {
     *   this._onChange = fn;
     * }
     * ```
     *
     * When the value changes in the UI, call the registered
     * function to allow the forms API to update itself:
     *
     * ```ts
     * host: {
     *    '(change)': '_onChange($event.target.value)'
     * }
     * ```
     *
     * @param fn The callback function to register
     */
    registerOnChange(fn: any): void;
    /**
     * @description
     * Registers a callback function that is called by the forms API on initialization
     * to update the form model on blur.
     *
     * When implementing `registerOnTouched` in your own value accessor, save the given
     * function so your class calls it when the control should be considered
     * blurred or "touched".
     *
     * @usageNotes
     * ### Store the callback function
     *
     * The following example stores the provided function as an internal method.
     *
     * ```ts
     * registerOnTouched(fn: any): void {
     *   this._onTouched = fn;
     * }
     * ```
     *
     * On blur (or equivalent), your class should call the registered function to allow
     * the forms API to update itself:
     *
     * ```ts
     * host: {
     *    '(blur)': '_onTouched()'
     * }
     * ```
     *
     * @param fn The callback function to register
     */
    registerOnTouched(fn: any): void;
    /**
     * @description
     * Function that is called by the forms API when the control status changes to
     * or from 'DISABLED'. Depending on the status, it enables or disables the
     * appropriate DOM element.
     *
     * @usageNotes
     * The following is an example of writing the disabled property to a native DOM element:
     *
     * ```ts
     * setDisabledState(isDisabled: boolean): void {
     *   this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
     * }
     * ```
     *
     * @param isDisabled The disabled status to set on the element
     */
    setDisabledState?(isDisabled: boolean): void;
}

这个接口包含了下面这些方法

writeValue(obj: any): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState?(isDisabled: boolean): void;

• writeValue(obj: any): void; 表单值发生改变时Angular会调用这个方法给我们的表单组件赋值
• registerOnChange(fn: any): void; Angular调用这个函数给我们的自己写的组件传递一个onChange方法, 调用这个方法, 会更新表单中的值
• registerOnTouched(fn: any): void; Angular通过这个方法给我们在组件传递一个onTouch方法, 在我们的组件中调用onTouch会更新表单的 touched 字段

注入 NG_VALUE_ACCESSOR

除了实现 ControlValueAccessor 接口外, 我们自定义的表单组件还需要提供一个 token 为 NG_VALUE_ACCESSOR 的注入, 像下面这样

import {
  forwardRef,
  OnInit,
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'cti-tag-input',
  templateUrl: './tag-input.component.html',
  styleUrls: ['./tag-input.component.less'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TagInputComponent),
      multi: true,
    },
  ],
})
export class TagInputComponent implements OnInit, ControlValueAccessor {
}

实例: TagInput 组件

了解了上面的内容, 就可以开始编写 TagInput 组件了;

组件的html模板

<div [class.disabled]='disabled'
     class="tag-input-wrapper">
  <div class="tag-list">
    <span class="tag"
          *ngFor="let tag of tags">
      {{tag}}
    </span>
  </div>
  <div>
    <ng-container *ngIf="!isInputting">
      <button class="btn-add-tag"
              (click)="onClick()">新增标签</button>
    </ng-container>
    <ng-container *ngIf="isInputting">
      <input type="text"
             #tagInputEl
             (keydown)="onKeyDown($event)"
             [(ngModel)]="tagInput"
             (blur)="onBlur()">
    </ng-container>
  </div>
</div>

TagInputComponent中需要定义如下字段

// 文本输入框, 用来获取用户输入的标签的, 拿到这个可以在适当的时机对输入框进行 focus 操作
@ViewChild('tagInputEl', { read: ElementRef })tagInputEl: ElementRef<HTMLInputElement>;
tags: string[] = [];
// 指示表单组件是否处于禁用状态
disabled = false;
// 保存用户输入的文字
tagInput = '';
// 当前是否正在输入
isInputting = false;

private _onChange = (_: string[]) => {};
private _onTouch = () => {};

实现ControlValueAccessor

writeValue(obj: any): void {
if (obj instanceof Array && obj.every((x) => typeof x === 'string')) {
    this.tags = obj;
}
}
registerOnChange(fn: any): void {
this._onChange = fn;
}
registerOnTouched(fn: any): void {
this._onTouch = fn;
}
setDisabledState?(isDisabled: boolean): void {
this.disabled = isDisabled;
}

在适当的时机调用 Angular 传递给我们的 _onChange, _onTouch 方法, 更新表单值

onKeyDown(event: KeyboardEvent) {
    // 回车键键值: 13
    if (event.key.toLowerCase() === 'enter' || event.key === ',') {
        this.emitTags();
    }
}

onBlur = () => {
    this.emitTags();
};

onClick() {
    this.isInputting = !this.isInputting;
    let timer = setTimeout(() => {
        this.tagInputEl.nativeElement.focus();
        clearTimeout(timer);
        timer = undefined;
    }, 20);
}

private emitTags() {
    if (!this.tags.includes(this.tagInput) && this.tagInput) {
        this.tags.push(this.tagInput);
        this._onChange(this.tags);
    }
    this.tagInput = '';
    this.isInputting = false;
    this._onTouch();
}

查看完整的 TagComponent 代码

最终效果

查看完整代码

CustomTagInput