Угловой указатель даты материала: как получить две разные ошибки валидации для неверного и обязательного ввода - PullRequest
Новая
       34

Угловой указатель даты материала: как получить две разные ошибки валидации для неверного и обязательного ввода

0 голосов
/ 18 октября 2019

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

Мой html: 

     <mat-form-field appearance="outline">
        <mat-label>Data di nascita*</mat-label>
        <input matInput [matDatepicker]="picker" 
           formControlName="birthday">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker- 
         toggle>
        <mat-datepicker touchUi #picker></mat-datepicker>
        <mat-error 
           *ngIf="newCat.controls['birthday'].hasError('required')">Campo 
             obbligatorio</mat-error>
        <mat-error *ngIf="newCat.controls['birthday'].invalid">Formato di 
            data errato</mat-error>
     </mat-form-field>

Мой ts: 

    this.newCat = this.formBuilder.group({
       name: ['', Validators.required],
       birthday: ['', Validators.required],
    });

В моем случае сравниваются два сообщения вместе, когда ввод пустой или когда дата недействительна,Я получаю "Campo obbligatorio" и "Formato di data errato" вместе.

Ответы [ 2 ]

1 голос
/ 18 октября 2019

попробуйте это. 

<mat-form-field appearance="outline">
        <mat-label>Data di nascita*</mat-label>
        <input matInput [matDatepicker]="picker" 
           formControlName="birthday" [matDatepickerFilter]="filterDatePicker()">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker- 
         toggle>
        <mat-datepicker touchUi #picker></mat-datepicker>
        <mat-error 
           *ngIf="newCat.controls['birthday'].hasError('required')">Campo 
             obbligatorio</mat-error>
        <mat-error *ngIf="invalidDate">Formato di 
            data errato</mat-error>
     </mat-form-field>


filterDatePicker() {
 // write your logic for selected date validation here.
   if(uoir condition) {

   this.invalidDate = true;

} else {
 this.invalidDate = false;
}
0 голосов
/ 18 октября 2019

Есть два варианта:

1. Установите для matinput для Datepicker значение только для чтения, а затем установите действительный формат даты для DatePicker в коде TS или HTML: 

<input matInput [matDatepicker]="picker" formControlName="birthday" readonly>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi #picker></mat-datepicker>

2. Измените свой второй тег Mat-Error на: 

<mat-error *ngIf="!newCat.controls['birthday'].hasError('required') && newCat.controls['birthday'].invalid">
  Formato di data errato
</mat-error>
...