ion-datetime 不绑定 ngmodel答案

【问题标题】：ion-datetime not binding ngmodelion-datetime 不绑定 ngmodel
【发布时间】：2019-08-15 16:40:08
【问题描述】：

大家好，这件事快把我逼疯了。

我有这个代码：

<form (ngSubmit)="search()" #rosterSearchForm="ngForm">
  <ion-row>
    <ion-col>
      <ion-list inset>
        <ion-item>
          <ion-datetime type="text" placeholder="Year" displayFormat="YYYY" name="year" [(ngModel)]="data.rq.Year" required></ion-datetime>
        </ion-item>
        <ion-item>
          <ion-datetime type="text" placeholder="Month" displayFormat="MM" name="month" [(ngModel)]="data.rq.Month" required></ion-datetime>
        </ion-item>
      </ion-list>
    </ion-col>
  </ion-row> 
  <ion-row>
    <ion-col class="signup-col">
      <button ion-button class="submit-btn" full type="submit" [disabled]="!rosterSearchForm.form.valid" >Search</button>
    </ion-col>
  </ion-row>
</form>

第一个日期选择器与 ngmodel 进行绑定。第二个没有。我需要分别获取年份和月份作为文本（例如“2017”和“11”）。验证也总是失败，提交按钮永远不会激活。

这似乎很简单。但我看不到错误。我要疯了。请帮帮我。

【问题讨论】：

标签： validation ionic2

【解决方案1】：

我最终这样做了：

<ion-label stacked>Month</ion-label>
<ion-datetime placeholder="Month"
              pickerFormat="MMM YYYY" 
              displayFormat="MMM YYYY"
              [(ngModel)]="month">
</ion-datetime>

在 .ts 文件中

this.Year = this.datepipe.transform(this.month,'yyyy')
this.Month = this.datepipe.transform(this.month,'MM')

【讨论】：

【解决方案2】：

您不能使用ion-datetime，因为它不受支持。您可以使用以下代码：

    <ion-row>
      <ion-col>
        <ion-list inset>

          <ion-item>
            <ion-datetime type="text"
                          placeholder="Select Month And year"
                          displayFormat="MM/YYYY"
                          pickerFormat="MM YYYY"
                          name="month"
                          [(ngModel)]="rosterSearchForm.month" required>
            </ion-datetime>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="signup-col">
        <button ion-button class="submit-btn" full type="submit"
                [disabled]="!rosterSearchForm.form.valid" >Search</button>
      </ion-col>
    </ion-row>
  </form>

和.ts

  search(rosterSearchForm){

    console.log(rosterSearchForm.value);

  }

【讨论】：