angular - 如何验证日期并在格式不正确时显示错误

Question

我有一个约会（和momentjs）。日期必须采用 DD/MM/YYYY 格式。

我的hmtl代码是：

<mat-form-field>
            <input id="datanint" formControlName="dateBirth" matInput [matDatepicker]="picker" />
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker startView="multi-year" [startAt]="startDate"></mat-datepicker>

        </mat-form-field>

我的控制是：

dateBirth: [DateValidator.validateDate],

这是我的验证器：

export class DateValidator implements Validators {


  static validateDate(fdValue: AbstractControl) {
regexDate="...:";
    console.log(fdValue);
   if(fdValue != null && fdValue.value!= null && fdValue.value.match(regexDate) {
     return { pattern: true };
   }
}

问题是，当我输入这样的日期（2000 年 13 月 13 日）时，我希望在我的错误中（在表单控件中）有pattern error但不是这样，因为 fdValue.value等于 null（当输入值为2000 年 13 月 13 日）。我需要它fdValue.value（或者我可以用来获取正确值的东西）在输入值中必须相同，而且日期格式也不正确。

标签： angularangular-materialmomentjsangular-reactive-formsangular-moment

Answer 1

在这个 Scenerio 中，您无法获取 fromControl 的值，它会始终显示 nullconsole.log(fdValue.value);因为您可能在 datepicker 输入中传递了一些无效输入。因此，当您将无效值放入 datepicker 时，您fdValue的值为 null 但您仍然可以在error对象中获取输入

 static validateDate(fdValue: AbstractControl) {
    const date = fdValue.value;
    console.log('date: ',fdValue);
    console.log('error: ',fdValue.errors?.matDatepickerParse?.text);
    if (date ===null || date==='') return { requiredFromDate: true };
  
  }

但是当您输入无效的日期输入时，您将得到fdValue.value错误null对象包含该输入值

要检查代码，请检查angular-customvalidator-by-naib