Angular Can'；t在自定义表单验证中执行函数。。为什么？

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

我的应用程序运行正常，我只是在自定义验证器中重复了函数的代码，一切都很好。。但我不应该重复代码

my.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文件中的My date解析函数：

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;
}

My dateValidaors（）函数（都在相同的组件中）：

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;

}

datevalidator（表单：FormGroup）{
让fechaFrom=form.get（'fechaDesde'）.value；
让fechaTo=form.get（'fechaHasta'）.value；
fechaFrom=this.parseToDateFormat（fechaFrom）；
fechaTo=this.parseToDateFormat（fechaTo）；
如果（fechaFrom执行验证程序时这看起来像是范围问题
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;
        }
    }

}

执行验证器时这看起来像是范围问题。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;
        }
    }

}

---

Juan，Abdelmak是这样说的：你的函数dateValidator

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

您可以像这样使用验证器

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

searchForm=newformgroup(
{
...
}，[this.dateValidators（）]/Juan，这是Abdelmak的说法，即：您的函数dateValidator

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

您可以像这样使用验证器

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

searchForm=newformgroup(
{
...
}，[this.dateValidators（）]//也许这个答案会有帮助也许这个答案会有帮助谢谢，现在我了解了很多，这是一个非常简单的答案！谢谢，现在我了解了很多，这是一个非常简单的答案！