0

我在 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;

}

错误是：

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

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

有人可以解释一下吗？

4

2 回答 2

1

这看起来像是执行验证器时的范围问题，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()])
于 2021-01-16T20:11:39.917 回答
1

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

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

您使用验证器，例如

  searchForm = new FormGroup(
  {
    ...
  },[this.dateValidators()] //<--see the parenthesis
  );
于 2021-01-18T12:46:47.753 回答