创建一个通用的验证器，以防止在文本区域+ Angular 8中粘贴数据时添加换行符

问题描述

我想创建一个自定义验证器，该验证器可以检测并删除文本字段中文本结尾的任何换行符，而无需隐式调用这些组件。

当页面加载时，它将能够检测到任何文本字段并自动实现验证器逻辑。

我知道我可以简单地验证每个单独的文本字段，但是它的位数是100s，因此想知道一种优雅的方法。

解决方法

我可以通过两种方法实现这一点：一个是有一个拦截器，第二个是为一些模糊的特定字段设置自定义指令，即当鼠标移离一个字段时会修剪数据

我通过扩展 FormControl 来映射结果值来解决类似的问题。现在您可以使用 TextControl 并使用标准角度验证器对其进行验证。

import { FormControl,ValidatorFn } from '@angular/forms';

export class TypedFormControl<T> extends FormControl {
  constructor(value?: T | null | undefined,validators?: ValidatorFn[]) {
    super(value,validators?.map(TypedFormControl.serializeValidator));
  }

  private static serializeValidator(validator: ValidatorFn): ValidatorFn {
    return (ctrl) =>
      validator({
        value: (ctrl as TypedFormControl<any>).getValue(),} as FormControl);
  }

  getValue(): T {
    return this.value;
  }

  update(value: T): void {
    this.patchValue(value);
  }
}

export class TextControl extends TypedFormControl<string> {
  constructor(initialValue: string = '',validators: ValidatorFn[] = []) {
    super(initialValue,[...validators,Validators.maxLength(250)]);
  }

  getValue(): string {
    return `${this.value ?? ''}`.trim();
  }
}

更新视图

<textarea [formControl]="textControl" (blur)="textControl.update(textControl.getValue())"></textarea>

angular angular customvalidator customvalidator