Ошибка ввода угловой и html5 даты

Question

У меня есть простая форма с одним контролем даты. Когда я набираю недопустимую дату, например 30 февраля 2018 года, элемент управления находится в недопустимом состоянии, и мой стиль CSS включается, и элемент управления отображается с красной рамкой. Но моя проблема в том, когда пользователь нажимает сохранить, this.appFormGroup.invalid возвращается false и операция сохранения выполняется. Как мне остановить операцию сохранения? (Я хочу сообщить пользователю, что дата недействительна.)

Следующий код демонстрирует проблему, с которой я сталкиваюсь. Благодарю.

файл app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  appFormGroup: FormGroup;

  constructor(public formBuilder: FormBuilder) {

  }

  ngOnInit() {
    this.appFormGroup = this.formBuilder.group({
      sampleDate: ['']
    });
  }

  onButtonClick() {
    if (this.appFormGroup.invalid) {
      alert("Invalid");
    }
    else {
      alert("Valid");
    }
  }
}

файл app.component.html

<form [formGroup]="appFormGroup">
  <div >
    <div>
      <label for="sampleDate">Sample Date</label>
      <input type="date" [id]="sampleDate" formControlName="sampleDate" min="" class="form-control-dynamic">
    </div>
    <button (click)="onButtonClick()">Save</button>
  </div>
</form>

файл app.components.css

input[type="date"]:invalid {
    border-width : 2px;
    border-color: red;
}

Answer 1

В вашем контроле формы вы не использовали никакой проверки. Сначала удалите min attr из HTML, создайте пользовательский валидатор даты и используйте этот валидатор при создании элемента управления. Чтобы избежать ошибки в пустом поле, не используйте required и возвращайте true из пользовательского валидатора, если значение есть и оно недопустимо.

sampleDate: ['', [DateValidator]] //don't use required


function DateValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        if (control.value !== undefined && YOUR_CUSTOM_VALIDATION_LOGIC) {
            return { 'dateInvalid': true }
        };
        return null;
    }
}

Answer 2

Дело в том, что ваша угловая форма не проверяет дату, поэтому она не является недействительной.

Вам нужно будет добавить валидатор в вашу форму, например

sampleDate: ['', [Validators.required, customDateValidator]

Вам, вероятно, понадобится создать свой собственный валидатор дат, смотрите здесь.

Затем, если ваш пользовательский валидатор возвращает, что дата недействительна, свойство формы invalid будет установлен в true.