Question

我是角色的新手，我想实现一个自定义验证器，可以修剪模型驱动的方法形式的输入字段。我在实现中遇到一些问题。当我使用 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

尝试以下方式：

修改并设置值更改事件的新值，无论何时更改或设置值，都会自动调用验证器函数。

// import statement

function trimSpace（trimmedVal：boolean）：ValidatorFn {return   （control：AbstractControl）：{[key：string]：any} =＆gt; {       如果（trimmedVal）{           回归真的吗？ null：{trimmed：true}       }}; }

// @Component

//导出类{       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');
    }

}  }

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

3 个答案: