Пользовательский валидатор для даты до angular - PullRequest
Новая
       53

Пользовательский валидатор для даты до angular

0 голосов
/ 29 апреля 2020

Я хочу написать пользовательский dateValidator с реактивными формами, чтобы проверить, является ли введенная дата до сегодняшнего дня.

Компонент. 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 {
  ...
}

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Поскольку вы запрашиваете синтаксис ValidationFn, он может выглядеть следующим образом: 

dateValidator(control: FormControl): { [s: string]: boolean } {
    // implementation of the validation
}

Использование: 

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

С moment библиотека: 

import * as moment from 'moment';

[...]

dateValidator(control: FormControl): { [s: string]: boolean } {
  if (control.value) {
    const date = moment(control.value);
    const today = moment();
    if (date.isBefore(today)) {
      return { 'invalidDate': true }
    }
  }
  return null;
}
0 голосов
/ 29 апреля 2020

Здесь вы можете увидеть демо Stackblitz . 

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

И вы можете использовать его так: 

ngOnInit() {
    this.form = this.fb.group({
      ...
      birthday: [new Date(), dateValidator()],
      ...
    });
  }
...