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

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

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

}

错误是：

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

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

谁能解释一下？

解决方法

这看起来像是执行验证器时的作用域问题 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.pattern(/^([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4})$/),]),},[DateValidator.dateValidators()])

,

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

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

你像这样使用验证器

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