Пользовательский валидатор Angular 6 для сравнения текущей даты с выбранной датой не проверяется должным образом и не позволяет добавлять какое-либо значение

Question

Мне нужно проверить дату контроля рождаемости реактивной формы, поэтому, если пользователь выбрал значение из будущего, чтобы отключить кнопку сохранения:

import { AbstractControl } from '@angular/forms';

export function validateDOB(control: AbstractControl)
{

    let currentDateTime = new Date();
    let monthValue = currentDateTime.getMonth()+1;
    let formattedDate = currentDateTime.getFullYear() +'-'+ monthValue +'-'+currentDateTime.getDay();

    let controlValue = control.value;
    let monthOfControlValue = controlValue.getMonth()+1;
    let FinalControlValue = controlValue.getFullYear()+'-'+monthOfControlValue+'-'+controlValue.getDay;
    console.log(FinalControlValue)
    if(formattedDate<control.value)
    {
        return {response: true};
    }
    return null;
}

Объяснение:

Я работаю со сборщиком угловых материалов, поэтому дата будет отображаться следующим образом:

Пн. 01 октября 2018 00:00:00 GMT + 0300 (Восточноевропейское летнее время)

первые 3 строки получают текущую дату и преобразуют ее в формат YYYY-mm-dd:

let currentDateTime = new Date();
let monthValue = currentDateTime.getMonth()+1;
let formattedDate = currentDateTime.getFullYear() +'-'+ 
              monthValue +'-'+currentDateTime.getDay();

Последние 3 строки преобразуют дату, выбранную пользователем:

let monthOfControlValue = controlValue.getMonth()+1;
let FinalControlValue = controlValue.getFullYear()+'-'+monthOfControlValue+'-'+controlValue.getDay;
console.log(FinalControlValue )

На пользовательской стороне любая дата, независимо от того, была она меньше или больше, проверка не будет работать.

Я пытался провести сравнение без преобразования в YYYY-mm-dd, но это не помогло.'t / не будет работать.

Я изменил сценарий, изменив значение элемента управления на новую дату:

let controlValue = new Date(control.value);

И сценарий теперь выглядит так:

import { AbstractControl } from '@angular/forms';

export function validateDOB(control: AbstractControl)
{

    let currentDateTime = new Date();
    let monthValue = currentDateTime.getMonth()+1;
    let formattedDate = currentDateTime.getFullYear() +'-'+ monthValue +'-'+currentDateTime.getDay();
    console.log(formattedDate)
    let controlValue = new Date(control.value);
    let monthOfControlValue = controlValue.getMonth()+1;
    let FinalControlValue = controlValue.getFullYear()+'-'+monthOfControlValue+'-'+controlValue.getDay();
    console.log(FinalControlValue)
    if(formattedDate<control.value)
    {
        return {response: true};
    }
    return null;
}

И все еще не работает.

Answer 1

Часть ответа основана на помощи, предоставленной @lesiano.Но главная проблема заключалась в том, что сравнение включает в себя время.И, как упоминалось в этом старом ответе о переполнении стека , нам нужно установить время даты в 0's, поэтому сравнение будет иметь место:

date1.setHours(0,0,0,0)

Рабочий пользовательский валидатор:

import { AbstractControl } from '@angular/forms';

export function validateDOB(control: AbstractControl)
{

    let currentDateTime = new Date();
    currentDateTime.setHours(0,0,0,0);

    let controlValue = new Date(control.value);
    controlValue.setHours(0,0,0,0);

    //console.log(currentDateTime+'-'+controlValue)

    if(currentDateTime<control.value)
    {
        return {response: true};
    }
    return null;
}

Answer 2

Вместо написания пользовательской функции Validate для отключения дат, я бы использовал MAX свойство средства выбора даты, чтобы отключить выбор сегодняшней даты и будущих дат.

Код HTML:

<mat-form-field class="example-full-width">
  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

И в файле TS:

 minDate = new Date(1900, 0, 1);
 maxDate =  new Date(new Date().setDate(new Date().getDate()-1))

Вот Пример StackBlitz

Ссылочная ссылка

Answer 3

не могли бы вы попробовать это?

if(currentDateTime <controlValue )

с

let controlValue = new Date(control.value);

formattedDate в этом случае является строкой.