Angular 更新<；离子日期时间>；使用formGroup控制数据

我有一个使用“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>

姓名：*
日期：*

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

需要日期字符串，而不是日期对象，因此：

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(), 
    });
}

---

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

需要日期字符串，而不是日期对象，因此：

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(), 
    });
}

---

？userDataForm.controls['dateOfBirth'].value=新日期（2016-04-19）？@Eliseo值为只读属性。我尝试了

this.userDataForm.get（'dateOfBirth'）.setValue（新日期（“2016-04-19T18:03:40.887”）但仍然没有。ion-datetime需要“字符串”或“日期”？如果是字符串，则必须写入以下内容。userDataForm.get（'dateOfBirth'）。setValue（“2016-04-19T18:03:40.887”）？userDataForm.controls['dateOfBirth']。value=新日期（2016-04-19）？@Eliseo值是只读属性。我尝试了
this.userDataForm.get（'dateOfBirth'）.setValue（新日期（“2016-04-19T18:03:40.887”）但仍然没有。ion-datetime需要“字符串”或“日期”？如果是一个字符串，那么您必须编写这个.userDataForm.get（'dateOfBirth'）.setValue（“2016-04-19T18:03:40.887”）嘿，相反的呢？当您必须在服务器端将此“datetime”保存为datetime类型时？如何转换为日期/时间格式？这个答案对我很有帮助！如果您在上使用ngModel进行更新，它将只提供当前时间，因此请删除ngModel，然后在反应式表单上修补或设置值！嘿，对面怎么样？当您必须在服务器端将此“datetime”保存为datetime类型时？如何转换为日期/时间格式？这个答案对我很有帮助！如果您在上使用ngModel进行更新，它将只提供当前时间，因此请删除ngModel，然后在反应式表单上修补或设置值！