Ionic 4 日期时间选择器不更新其变量

Question

我正在使用 ionic 4 ion-datetime 选择器尝试 select 表单中的日期，但是当 selected 新日期时，它不会更新变量.

我已经尝试使用我知道的所有不同组合，但我已将所有这些组合都包含在这个示例中。

<form [formGroup]="upsert" (ngSubmit)="submitUpsert()">
  <ion-datetime
    display-format="MM DD, YYYY"
    picker-format="MM DD YYYY"
    min="2010"
    max="2030"
    class="form__group__item--input has-value"
    formControlName="date"
    placeholder="Select Date"
    [value]=date
    [(ngModel)]="event.today"
    (ngModelChange)="event.today"
  ></ion-datetime>
</form>

在我的表单控制器中我有：

constructor(
  private db: DatabaseService,
  private modalController: ModalController,
  private formBuilder: FormBuilder
) {
  this.upsert = this.formBuilder.group({
    title: ['', Validators.compose([Validators.required])],
    date: ['', Validators.compose([Validators.required])],
    notes: [''],
    location: [''],
    timezone: [''],
  });
  this.event.today = moment().toISOString(true);
  this.event.timezone = moment().format('ZZ');
}

最后，我使用表单提交操作

submitUpsert() {
  console.log("new date", this.event.today);
  if(this.upsert.invalid) {
    const error = {
      code: "001",
      message: this.upsert.status
    };
    this.showError(error);
  } else {
    this.db.upsert(this.upsert.value).then(eid => {
      console.log("Success", eid);
      this.hideUpsert();
    }, error => {
      this.showError(error);
      console.error(error);
    });
  }
}

在最新的 beta API 中，它没有提到使用 [(ngModel)] 或 (ngModelChange)，但这是我获得默认日期（今天）的唯一方法-select编辑。

不幸的是，它没有更新模型或表单对象。有什么想法吗？

Answer 1

您同时使用了 ngModel 和 FormControlName。使用任何一个。您可以使用 setValue() 方法更新表单控件值。

this.event.today = moment().toISOString(true);
this.upsert.get('date').setValue(this.event.today);

Answer 2

尝试像这样绑定模型 <ion-datetime [(ngModel)]="newsItem.validTo" name="validTo"></ion-datetime> 如果 ion-datetime 在 ngForm 中，则需要 name 属性。这在 Ionic 4 中对我有用。

Ionic 4 日期时间选择器不更新其变量

Ionic 4 datetime picker does not update its variable

datepicker

ionic-framework

ionic4