1

I am using the ionic 4 ion-datetimepicker to try to select a date in a form, though when a new date is selected, it does not update the variable.

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

<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)]or (ngModelChange)，但这是我可以预先选择默认日期（今天）的唯一方法。

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

4

2 回答 2

2

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

this.event.today = moment().toISOString(true);
this.upsert.get('date').setValue(this.event.today);
于 2018-08-24T03:45:32.050 回答
0

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

于 2019-12-09T09:38:22.887 回答