我有两个日期字段，我想将它们设为必填字段，但它不符合我放置在控件上的必填属性。我读了另一篇 stack 帖子，但他只需要将 ngModel 添加到输入中。我已经包含了 ngModel，它仍然允许我在不插入日期的情况下进行保存。它适用于我的 type="text" 字段……“保存”按钮处于禁用状态，直到在目标字段中输入文本。但它不适用于日期。

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

解决方案

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

这是一个例子