0

我有一个 date_of_birth 字段，其中保存了一个纪元字符串。我想使用角度材料日期选择器来更改日期，这可以通过将其转换为

//convert matDatepicker timestamp format to epoch and save
var newDOB = new Date(privateUser.date_of_birth).getTime().toString();
privateUser.date_of_birth = newDOB;

在将其存储到数据库之前，但是当尝试在日期选择中将其显示为默认日期时，我不太确定如何还原它。

这是我目前的代码

<div *ngIf="(userPrivate$ | async) as userPrivate">
  <form (ngSubmit)="updateUser(user, userPrivate)">
    <mat-form-field >
      <input matInput type="text" [(ngModel)]="user.username" name="username" placeholder="Username">
    </mat-form-field >
    <mat-form-field >
      <input matInput [matDatepicker]="dp" placeholder="Date of Birth"   [(ngModel)]="userPrivate.date_of_birth" name="date_of_birth">
      <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
      <mat-datepicker #dp >
      </mat-datepicker>
    </mat-form-field>
  </form>
</div>

当我尝试添加

<mat-form-field >
  <input matInput [matDatepicker]="dp" placeholder="Date of Birth" [formControl]="userPrivate.date_of_birth"  [(ngModel)]="userPrivate.date_of_birth" name="date_of_birth">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp >
  </mat-datepicker>
</mat-form-field>

我会收到一个错误，因为它无法读取该值，它也无法通过添加从纪元转换它的函数来接受我试图做的任何事情。

<mat-form-field >
  <input matInput [matDatepicker]="dp" placeholder="Date of Birth" [formControl]="getDate(userPrivate.date_of_birth)"  [(ngModel)]="userPrivate.date_of_birth" name="date_of_birth">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp >
  </mat-datepicker>
</mat-form-field>

getDate(date)函数_

getDate(date){
  // convert Epoch time to timestamp format
  var newDate= new Date(date).getTime();
  return newDate;
}

我应该如何处理这个问题，以便我可以输入日期以将 date_of_birth 值显示为默认值？

4

1 回答 1

0

当您的日期选择器中的日期格式与您自己的数据结构相比时，通常有两种选择：1) 以某种方式告诉 datePicker 组件将其数据结构转换为您的数据结构，这通常通过传递一个适配器来完成类 2) 让 datePicker 将自己的数据格式传递给表单或模型，并且仅在您发布表单或设置表单值时手动转换。

使用适配器

实际上，材料日期选择器确实为您提供了提供适配器的可能性，用法在https://material.angular.io/components/datepicker/overview中有很好的描述

手动转换

手动转换时，您必须将数据结构转换为日期选择器以设置初始值以及父组件何时更新表单值。每当您想保存表单中的数据时，您都必须进行反向转换。

所以你不必以任何方式将转换方法添加到模板中，在提交方法中进行转换。您的示例中绝对错误的是[formControl]期望一个角度形式的控件，而不是一个值（在这种情况下是日期本身）。

就个人而言，我会选择适配器解决方案，因为这样转换逻辑不会分散在各处，而是集中在特定的类上，这也更容易测试。

完全不相关的笔记

一般来说，尽量不要在值绑定中调用方法，例如。

<input matInput [formControl]="getDate(userPrivate.date_of_birth)" >（为简洁起见省略了一些属性）

每次更改检测时都会调用这些方法（这可能会经常发生，特别是如果您不使用ChangeDetectionStrategy.onPush），因此在每次更改检测时都会进行转换，即使源值没有更改也是如此。

在这些绑定方法中隐藏复杂的计算非常容易，这可能会大大降低您的应用程序的速度。

相反，仅在源值更改时进行计算，将结果存储在组件的字段中，将该字段绑定到模板中。

于 2019-09-30T11:07:11.713 回答