Material2 - Datepicker自定义验证器值确实返回日期对象而不是字符串

Posted 2021-04-05

我正在使用反应形式组为datepicker创建自定义验证器。

在我的.ts文件中

form: FormGroup;

constructor(
    private fb: FormBuilder,
    private validatorSrv: CustomValidatorService,
) {}

createForm(): void {
    this.form = this.fb.group({ 
        trans_date: [null, [Validators.required, this.validatorSrv.validDate]] 
    });
}

现在我班上的CustomValidatorService

validDate(c: AbstractControl): any {
   // It always return 'Mon Jan 01 2001 00:00:00 GMT+0800 (Taipei Standard Time)' 
   // When value is 1
   // And 'Sat Dec 01 2001 00:00:00 GMT+0800 (Taipei Standard Time)'
   // When value is 12
   console.log(c.value); 
}

在上面的例子中，它总是返回js datetime对象。

如何从自定义验证器AbstractControl获取实际输入值？

答案

这是一种常见的行为。您可以做的是将验证器中的日期转换为字符串。

如果你不知道，Angular Material的日期选择器实际上可以使用moment.js。

在你的情况下，也许你可以使用它？这可以解决您的问题，您只需要使用当前可用的众多功能之一转换日期。

另一答案

我不知道这是否是最简单或推荐的自定义日期验证方法。因为拥有日期对象而不是弦乐用户输入是一种常见的行为。使用AbstractControl自定义格式验证会让事情变得更复杂。

所以我刚刚在控件的keypress事件上写了一个简单的函数，并尝试验证这种方式。

isValidDate(): boolean {
   // A lengthy logic was omitted here for simplicity sake...
   if (format is mm/dd/yyyy or mm-dd-yyyy) { return true; }
   return false;
}


onTransDateKeydown(e: any): void {
    const c = this.form.get('trans_date');

    if (this.isValidDate(e.target.value)) {
      c.setErrors(null);
    } else {
      c.setErrors({ invalidDate: true });
    }
}

您可以通过编程方式使用setErrors()方法向ReactiveForm控件发出错误，这非常棒。