如何解决创建一个通用的验证器,以防止在文本区域+ 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。