实现自定义验证器以修剪角度 2 中的输入字段？

Question

我是 Angular 新手，我想实现一个自定义验证器，它可以修剪模型驱动方法表单的输入字段。我在实现中遇到了一些问题。当我使用 setValue() 设置值时 在验证器函数中将发生无限调用堆栈。所以请建议我如何更新表单值以及我想以我正在使用的方式使用验证器的另一件事。

验证器函数

 static trimSpace(c:AbstractControl) {
        console.log(c);
        let v= c.value.replace(/\s\s+/g, ' ');
        let valid=true;
        console.log(v.trim());
        c.setValue(v);
     return true ? null : {
      trimmed: true
     }
 } 

组件形式

 this.addressForm=this.fb.group({
     firstName:['',Validators.compose([Validators.required,TrimValidator.trimSpace])]});

Answer 1

您不应在验证阶段更改值，否则您可能会获得无限的验证周期。

这一行

let v= c.value.replace(/\s\s+/g, ' '); 

应该被删除，并且您应该创建一个自定义管道，以便在模板中更改该值，然后再到达验证器逻辑。

https://angular.io/guide/pipes

Answer 2

同意@Dean 但如果你仍然想这样做：

  c.setValue(v,{emitEvent:false});

如果 emitEvent 为 true，此更改将导致 FormControl 上的 valueChanges 事件被发出。这默认为 true（因为它属于 updateValueAndValidity）。

但这是一个糟糕的主意。

一定要创建管道或指令。

Answer 3

我会依靠这里的一个事件来控制行为。所以你可以在模板中做：

(keyup)="trim(addressForm.controls.firstName.value)"

在 TS 中：

trim(value) {
  let val = value.replace(/\s\s+/g, ' ');
  this.addressForm.controls.firstName.patchValue(val)
}

似乎您正在进行某种类型的验证。然后，您可以在需要时为表单设置自定义错误：

this.addressForm.setErrors({trimmed: true})

并删除它...

this.addressForm.setErrors(null)

并在模板中显示错误（如果存在）：

*ngIf="addressForm.hasError('trimmed')"

Answer 4

尝试以下方式：

在值更改事件中修剪并设置新值，每当您的值发生更改或设置时，验证器函数就会自动被调用。

进口声明

function trimSpace(trimmedVal: boolean): ValidatorFn {   
  return (control: AbstractControl): {[key: string]: any} => {
    if(trimmedVal){
      return true ? null : { trimmed: true }
    }
  }; 
 }

//Component

export class  {
let trimmed: boolean = false;

//  constructor(
ngOnInit(){
    this.addressForm = this.fb.group({
        firstName:['', Validators.compose([Validators.required, trimSpace(this.trimmed)])]
    });
    this.addressForm.valueChanges.subscribe(data => this.onValueChanged(data));
}
onValueChanged(data?: any) {
    // trim value code
    if(value == trimmed){
        this.trimmed = true;
        // set value in following way
        this.addressForm..controls['firstName'].setValue('trimmedValue');
    }
}  }