无法在自定义表单验证中执行功能.. 为什么？

Question

我在 Angular 11 中有一个反应式表单，我正在尝试在表单的自定义验证器中执行日期解析函数，但是我在浏览器终端上收到一个错误，提示该函数未定义。似乎验证器在函数定义之前运行.. 但是为什么呢？有解决办法吗？

我的应用可以工作，我只是在自定义验证器中重复了函数的代码，一切都很好..但我不应该重复代码......

我的 .ts 的构造函数：

constructor(private navbarService: NavbarService) {
    this.navbarService.showNavbar(true);
    this.placeholderDate = new Date;

    this.searchForm = new FormGroup({
        fechaDesde: new FormControl('', [
            Validators.required,
            Validators.pattern(/^([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4})$/)
        ]),
        fechaHasta: new FormControl('', [
            Validators.required,
            Validators.pattern(/^([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4})$/),
        ]),
    }, [this.dateValidators])

}

我在同一个 .ts 文件中的日期解析函数：

parseToDateFormat(date: string): Date {

    const destructurDate = date.split('-');
    if (destructurDate[0].length === 1) destructurDate[0] = '0' + destructurDate[0];
    if (destructurDate[1].length === 1) destructurDate[1] = '0' + destructurDate[1];
    let parsedDate = destructurDate.join('-');
    const result = new Date(parsedDate.replace(/(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"));
    return result;
}

我的 dateValidaors() 函数（都在相同的组件 ts 中：

dateValidators(form: FormGroup) {
    let fechaFrom = form.get('fechaDesde').value;
    let fechaTo = form.get('fechaHasta').value;
    fechaFrom = this.parseToDateFormat(fechaFrom);
    fechaTo = this.parseToDateFormat(fechaTo);
    if (fechaFrom <= fechaTo) return null;

}

错误是：

错误错误：未捕获（承诺）：类型错误：无法访问属性“parseToDateFormat”，这是未定义的 dateValidators@http://localhost:4200/main.js:1811:5

同样，我的解决方案是将解析函数的逻辑复制粘贴到验证器中，但重复代码。

谁能解释一下？

Answer 1

Juan，Abdelmak 是怎么说的，那就是：你的函数 dateValidator 去

dateValidators() {
    return (form: FormGroup) => {
     ...your code...
     ..here you can use "this"
   }
}

你像使用验证器

  searchForm = new FormGroup(
  {
    ...
  },[this.dateValidators()] //<--see the parenthesis
  );

Answer 2

这看起来像是执行验证器时的范围问题this.dateValidators 不存在您的组件的引用，这就是parseToDateFormat 未定义的原因。我建议创建一个验证器类并在该类中定义静态方法，例如

export class DateValidator {
    public static parseToDateFormat(date: string): Date {
        const destructurDate = date.split('-');
        if (destructurDate[0].length === 1) destructurDate[0] = '0' + destructurDate[0];
        if (destructurDate[1].length === 1) destructurDate[1] = '0' + destructurDate[1];
        let parsedDate = destructurDate.join('-');
        const result = new Date(parsedDate.replace(/(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"));
        return result;
    
    }
    public static dateValidators() {
        return (form: AbstractControl) => {
            let fechaFrom = form.get('fechaDesde').value;
            let fechaTo = form.get('fechaHasta').value;
            fechaFrom = DateValidator.parseToDateFormat(fechaFrom);
            fechaTo = DateValidator.parseToDateFormat(fechaTo);
            if (fechaFrom <= fechaTo) return null;
        }
    }

}

并在您的表单组中将您的日期验证器初始化为

this.searchForm = new FormGroup({
  fechaDesde: new FormControl('', [
    Validators.required,
    Validators.pattern(/^([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4})$/)
  ]),
  fechaHasta: new FormControl('', [
    Validators.required,
    Validators.pattern(/^([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4})$/),
  ]),
}, [DateValidator.dateValidators()])