时间戳

首页 > 解决方案 > 是否可以使 Angular ReactiveForm ValidatorFn 设置错误几秒钟？

angular - 是否可以使 Angular ReactiveForm ValidatorFn 设置错误几秒钟？

问题描述

我正在尝试写ValidatorFn来检查表单的控件是否有重复项。

我已经编写了一个验证器来检查它并返回一个错误，但是这个验证器可以在几秒钟后删除这个错误吗？我知道如何从组件中创建它，但我想编写一次并使用此验证器重用所有控件

export function tagDuplicates(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (!(control.dirty || control.touched) || !control.value) {
      return null;
    } else {
      const values = [...control.value].map(reduceString);

      if (values.some((el: string, index: number) => values.indexOf(el) !== index)) {
        control.value.pop();

        return { duplicate: `Item already added` };
      }

      return null;
    }
  };
}

function reduceString(str: string): string {
  return str.toLocaleLowerCase().replace(/[ ,.]/g, '');
}

标签： angularangular-reactive-formsangular-formsangular-formbuilder

解决方案

你有控制权，所以你可以使用 Rxjs 的计时器使用 setErrors(null)

import {timer} from 'rxjs'
...
if (values.some((el: string, index: number) => values.indexOf(el) !== index)) {

    timer(5000).subscribe(res=>{
        control.setErrors(null)
     })
     return { duplicate: `Item already added` };
 }

您可以在stackblitz中看到一个示例

推荐阅读