Question

我有一个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值作为默认值？

Answer 1

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

使用适配器

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

手动转换

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

因此，您不必以任何方式将转换方法添加到模板中，只需在Submit方法中进行转换。在您的示例中，绝对错误的是[formControl]希望使用角度控制而不是值（在这种情况下为日期本身）。

我个人将使用适配器解决方案，因为那样的话，转换逻辑不会分散，而是集中于特定的类，这也更易于测试。

完全不相关的笔记

通常，尽量不要在值绑定中调用方法，例如

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

每次更改检测时都会调用这些方法（这种情况可能会经常发生，尤其是在您不使用ChangeDetectionStrategy.onPush的情况下），因此即使每次检测到源值都没有，也都会在每次更改检测时进行转换改变了。

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

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

如何在MatDatepicker

1 个答案: