Question

我有一个使用'FormBuilder'构建的表单，它包含一个日期控件。如何使用patchValue()？

将数据设置（更新）到该控件

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

设置了所有其他控件（和）的数据，但日期控件仍为空。

page / component / .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(), 
    });
}

使用formGroup更新<ion-datetime>控制数据

1 个答案: