问题描述
我目前正在开发Ionic-Angular应用程序。为此，我需要页面上的datetime组件，该组件应该调整对象的创建日期。为此，我使用formGroup，但是当我选择另一个日期时，总是得到表格中初始化的日期。
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>
有人乍看之下我的错误在哪里，还是有人可以帮助我吗？提前非常感谢
解决方法
ion-datetime组件在其自己的处理程序方法中内部将value属性更新为更改后的值。您可以在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);
}