Почему требуемое сообщение не отображается при использовании mat datepicker? - PullRequest
Новая
       23

Почему требуемое сообщение не отображается при использовании mat datepicker?

0 голосов
/ 24 июня 2019

У меня есть следующий шаблон: 

<input type="text" class="form-control" name="my_date" 
  [matDatepicker]="myDatepicker" #myDate="ngModel"        
  [(ngModel)]="myDateValue" id="my_date" required>                                        
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>                                                                                
<mat-datepicker #myDatepicker></mat-datepicker>  
<div *ngIf="myDate.errors && (myDate.touched || cFormDirective.submitted)">                                                   
  <div *ngIf="myDate?.errors?.required">            
    Please enter date
  </div>                                            
</div>

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

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

Любая идея, как я могупоказать сообщение?

1 Ответ

0 голосов
/ 24 июня 2019

Я думаю, что проблема в этом cFormDirective.submited. используйте ссылку на шаблон, равную ngForm, например 

<form #myform="ngForm" (submit)="submit()">
    <mat-form-field>
        <input name="myDate" matInput [matDatepicker]="picker"
       placeholder="Choose a date" required 
         [(ngModel)]="myDateValue" #myDate="ngModel">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
  <mat-error *ngIf="myDate?.errors?.required">Please, enter date</mat-error>
</mat-form-field>
<div *ngIf="myDate.errors && (myDate.touched || myform.submitted)">                                                   <div *ngIf="myDate?.errors?.required">          
            Please enter date
    </div>                                          
</div> 
<button typpe="submit">click</button>
</form>

Кстати, если вы используете <mat-error>, вы избегаете некоторых сложных

...