Question

大家好，这件事让我发疯了。

我有这段代码：

<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”）。验证总是失败，并且提交按钮永远不会激活。

看起来很简单。但我看不出错误。我要疯了。请帮帮我。

Answer 1

您无法使用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);

  }

Answer 2

我最终这样做了：

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

ion-datetime不绑定ngmodel

2 个答案: