Ошибка ввода угловой и html5 даты - PullRequest
Новая
       37

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

0 голосов
/ 05 июня 2018

У меня есть простая форма с одним контролем даты.Когда я набираю недопустимую дату, например 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;
}

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

В вашем контроле формы вы не использовали никакой проверки.Сначала удалите 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;
    }
}
0 голосов
/ 05 июня 2018

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

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

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

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

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

...