无法输入类型=必需的日期

Question

我有两个要设置为必填的日期字段，但未遵守我在控件上放置的必填属性。我读了另一个堆栈文章，但是他只需要将ngModel添加到输入中。我已经包含了ngModel，它仍然让我无需插入Date即可保存。它适用于我的type =“ text”字段...在“目标”字段中输入文本之前，“保存”按钮被禁用。但这不适用于Date。

        <button ion-button text-only [disabled]="itineraryForm.invalid" 
          (click)="saveItinerary()">
          Save
       </button>

<ion-content class="cards-bg">
<ion-card padding class="ion-cards">
<ion-card-content padding>
<form #itineraryForm="ngForm" (ngSubmit)="saveItinerary()" 
autocomplete="off">
<div class="form-group">
    <ion-label for="destination">Destination</ion-label>
    <input type="text" class="form-control" [(ngModel)]="destination" 
      name="destination" required id="destination" placeholder="Enter 
     destination" #destin>
</div>
<div class="form-group">
  <ion-label >Trip dates</ion-label>
    <p style="float: left;">
      <input type="date" class="form-control" [(ngModel)]="startDate" 
        name="startDate" required id="startDate" placeholder="Start" />
    </p>
    <p style="float: right;">
      <input  type="date" class="form-control" [(ngModel)]="endDate" 
        name="endDate" required id="endDate" placeholder="End"/>
    </p>
   </div>
    </form>
  </ion-card-content>
  </ion-card>
 </ion-content>

Answer 1

在输入中添加#startDate="ngModel"和#endDate="ngModel"

<input type="date" class="form-control" [(ngModel)]="startDate" 
    name="startDate" required id="startDate" placeholder="Start" #startDate="ngModel" />

<input type="date" class="form-control" [(ngModel)]="endDate" 
    name="endDate" required id="endDate" placeholder="End" #endDate="ngModel" />

然后在您的按钮中，检查其是否有效。例如

<button ion-button disabled *ngIf="!startDate.valid || !endDate.valid">Save</button>
<button ion-button *ngIf="startDate.valid && endDate.valid">Save</button>

这是example