Ionic datetime 仅返回初始化值

Question

我目前正在开发 Ionic-Angular-app。为此，我需要一个页面上的 datetime 组件，它应该调整对象的创建日期。为此，我使用 formGroup，但是当我 select 另一个日期时，我总是在表单中初始化日期。

代码来自 ts.file

ngOnInit() {
  this.activatedRoute.paramMap.subscribe(paramMap => {
    if (!paramMap.has('axleCounterId')) {
      return;
    }
    const axleCounterId = paramMap.get('axleCounterId');
    this.loadedAxleCounter = this.homeService.getAxleCounter(axleCounterId);
  });

  this.form = new FormGroup({
    date: new FormControl(this.loadedAxleCounter.creationDate, {
      updateOn: 'blur'
    }),
    dateTest: new FormControl(null, {
      updateOn: 'change'
    })
  })
}

来自 html 的代码：

<form [formGroup]='form'>
  <ion-item lines=none>
    <ion-avatar slot=start>
      <ion-icon *ngIf=loadedAxleCounter.creationDate name=checkmark-circle color=success size=large></ion-icon>
    </ion-avatar>
    <ion-label>
      <div style="white-space: normal; ">
        <h2>Date</h2>
        <h3>
          <ion-datetime id=datePickerPadding [pickerOptions]=customOption formControlName=date></ion-datetime>
        </h3>
      </div>
    </ion-label>
  </ion-item>
</form>

有没有人一眼就看出我的错误在哪里，或者谁能帮助我？非常感谢

Answer 1

ion-datetime 组件在其自己的处理程序方法中内部将值属性更新为更改后的值。您可以在 ion-datetime

查看

但这里我们使用的是自定义点击处理程序。所以从我们这边手动需要修补表单值。 Done 处理程序将在单击时给出一个 event 对象。其中包含 Day, Month, Year。所以你可以做如下的事情。

handler: (event) => {
  this.form.get('date').patchValue(new Date(event.day.text + "-" + event.month.text + "-" + event.year.text).toDateString());
  console.log(this.form.value);
}

Ionic datetime 仅返回初始化值

Ionic datetime only gives back initialized values

angular

datetime

ionic-framework

form-control

分叉并工作Demo