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

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})/, "//"));
    return result;
}

我的 dateValidators() 函数（都在同一个组件中 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;

}

错误是：

ERROR Error: Uncaught (in promise): TypeError: can't access property "parseToDateFormat", this is undefined dateValidators@http://localhost:4200/main.js:1811:5

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

有人可以解释一下吗？

Answer 1

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

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})/, "//"));
        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()])

Answer 2

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

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

你使用验证器就像

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

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

Can't execute function inside custom form validation.. why?

angular

angular-reactive-forms

angular-forms

angular11