日期之前的自定义验证器(以角度表示)>

问题描述 投票:0回答:1

我想用反应形式编写一个自定义dateValidator,以检查输入的日期是否在今天之前。

Component.html

<form class="container" [formGroup]="form" (ngSubmit)="submit()">
  <div mat-dialog-content>
    ...
    <mat-form-field>
      <mat-label>Birthday</mat-label>
      <input  matInput [matDatepicker]="birthdayDatepicker" formControlName="birthday">
      <mat-datepicker-toggle matSuffix [for]="birthdayDatepicker"></mat-datepicker-toggle>
      <mat-datepicker #birthdayDatepicker></mat-datepicker>
    </mat-form-field>
  </div>
</form>

Component.ts

  ngOnInit() {
    this.form = this.fb.group({
      name : [,Validators.required],
      email: [,Validators.email],
      birthday: [,dateValidator],
      role: [,Validators.required]
    });
  }

这里可以写些什么?我希望输入的值比今天低:value < new Date()

export function dateValidator(): ValidatorFn {
  ...
}

我想编写一个带有反应形式的自定义dateValidator,以检查输入的日期是否在今天之前。 Component.html

<...>]] >>
export function dateValidator(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const today = new Date().getTime();

    if(!(control && control.value)) {
      // if there's no control or no value, that's ok
      return null;
    }

    // return null if there's no errors
    return control.value.getTime() > today 
      ? {invalidDate: 'You cannot use future dates' } 
      : null;
  }
}
angular date angular-reactive-forms angular-validator
1个回答
0
投票
export function dateValidator(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const today = new Date().getTime();

    if(!(control && control.value)) {
      // if there's no control or no value, that's ok
      return null;
    }

    // return null if there's no errors
    return control.value.getTime() > today 
      ? {invalidDate: 'You cannot use future dates' } 
      : null;
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.