无法输入类型=需要日期答案

【问题标题】：Cannot make an input type=date required无法输入类型=需要日期
【发布时间】：2018-12-31 13:06:12
【问题描述】：

我想将两个日期字段设为必需，但它不符合我放置在控件上的必需属性。我阅读了另一篇堆栈帖子，但他只需要将 ngModel 添加到输入中。我已经包含了 ngModel，它仍然可以让我在不插入日期的情况下保存。它适用于我的 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>

【问题讨论】：

你能链接到你读到的另一个问题吗？

标签： angular html ionic-framework ionic3

【解决方案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

【讨论】：