Question

我有以下模板：

<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>

单击提交时，输入文本框的样式正确应用为红色正确，但消息未显示。

如您所见，这是一个模板驱动的表单，我现在不想更新它仅仅因为日期而变成了反应形式，我也不用垫子形式的字段引起不同的设计。

任何想法我怎么显示消息？

Answer 1

我认为问题是此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>可以避免一些复杂的事情

为什么在使用日期选择器时未显示要求的消息？

1 个答案: