<ion-datetime> 使用窗体组更新控件数据

Question

>我有一个使用"FormBuilder"构建的表单，它包含一个日期控件。如何使用patchValue()设置（更新）该控件的数据？

控件已在模板中设置displayFormat="DD.MM.YYYY"。

所有其他控件

（和）上的数据都已设置，但日期控件仍为空。

页面/组件/.ts 文件

userDataForm: FormGroup;
user: UserModel;
constructor(
    private formBuilder: FormBuilder
) {
    this.userDataForm = this.buildForm();
}
buildForm(){
    return this.formBuilder.group({
        firstName: ['', Validators.compose([
          Validators.required
        ])],
        dateOfBirth: ['', Validators.compose([
          Validators.required
        ])]
    });
}
ionViewWillEnter() {
    // load data...
    refreshForm();
}
refreshForm(){
    this.userDataForm.patchValue({
        firstName: this.user.firstName,
        dateOfBirth: new Date("2016-04-19T18:03:40.887"), // does not work
    });
}

模板：

<ion-content padding>
    <ion-list>
        <form [formGroup]="userDataForm">
            <ion-item>
                <ion-label floating>Name: *</ion-label>
                <ion-input formControlName="firstName" type="text"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label floating>Date: *</ion-label>
                <ion-datetime formControlName="dateOfBirth" displayFormat="DD.MM.YYYY"></ion-datetime>
            </ion-item>
        </form>
    </ion-list>
</ion-content>

Answer 1

感谢评论中的 Eliseo 引导我找到答案。

<ion-datetime>需要一个日期字符串，而不是一个日期对象，所以这有效：

refreshForm(){
    this.userDataForm.patchValue({
        firstName: this.user.firstName,
        dateOfBirth: (new Date("2016-04-19T18:03:40.887")).toJSON(), 
    });
}

就我而言，user.dateOfBirth 属于 date 类型，所以我像这样使用它：

refreshForm(){
    this.userDataForm.patchValue({
        firstName: this.user.firstName,
        dateOfBirth: this.user.dateOfBirth.toJSON(), 
    });
}