0

您好 Stack Overflow 团队，当单击编辑链接以显示编辑客户详细信息表单时。在此表单中，除了未显示的日期选择器数据外，所有存在的数据都显示。来自 Web API 的所有数据。

EditUser.component.html

 <mat-form-field class="demo-full-width">
              <input matInput [matDatepicker]="picker" matTooltip="Enter Date Of Birth"
                placeholder="Choose Date Of Birth" formControlName="DataOfBirth">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>

编辑用户.component.ts

   this.service.getRegistrationDetails(this.registrationId).subscribe(data => {
  this.updateUserForm.controls['First_Name'].setValue(data.FirstName);
  const dateOfBirth = this.datePipe.transform(data.DataOfBirth.toString(), 'MM/dd/yyyy');});

服务.ts

getRegistrationDetails(registrationId: string): Observable<Register> {
// debugger;
return this.http.get<Register>(this.url + '/GetRegistration/' + registrationId);
}
4

1 回答 1

0

从 EditUser 打字稿文件中的代码来看，您没有将日期值设置到 FormControl 中。您将日期的值放入一个名为的 const 变量dateOfBirth中，但之后不对其进行任何操作。我猜你会需要这样的东西：

this.updateUserForm.controls['DataOfBirth'].setValue(dateOfBirth);

将值存储在 const 中之后。

编辑：再次查看后，您也可能向控件发送了不正确的日期格式。默认情况下，我相信 Angular DatePicker 适用于原生 Javascript Date 对象。

我不知道您的结果的数据类型来自该getRegistrationDetails()函数。但如果出生日期是一个字符串，您可以将其转换为 Date 对象，如下所示。如果它已经是 Date 对象，只需跳过将其转换为 Date 的第一行并将其直接设置到表单控件中。

this.service.getRegistrationDetails(this.registrationId).subscribe(data => {
  const dateOfBirth = new Date(data.DataOfBirth);
  this.updateUserForm.setValue({
    'First_Name': data.FirstName,
    'DataOfBirth': dateOfBirth
  });
});
于 2019-12-18T21:23:30.253 回答