使用 formGroup 更新 <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(), 
    });
}