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

Question

我想创建一个自定义验证器，它能够检测并删除文本字段中文本末尾的任何换行符，而不是隐式调用了这些组件。

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

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

Answer 1

我可以通过两种方法实现这一点：一种是使用拦截器，另一种是针对某些特定字段使用自定义指令，这些字段会变得模糊，即当鼠标离开字段时会修剪数据

Answer 2

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

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 8

Create a generic validator to prevent newline characters getting added during paste of data in text area + Angular 8

angular

customvalidator