在 Angular 中转换更新 CRUD 表单日期答案

【问题标题】：Convert Update CRUD Form Date in Angular在 Angular 中转换更新 CRUD 表单日期
【发布时间】：2021-06-02 19:27:20
【问题描述】：

当我在 Angular 中的创建 CRUD 表单上选择 3/2/2021 日期时，它会以 2021-03-02T00:00:00.000+00:00 的形式传递给 mongodb，然后在我的更新 CRUD 表单上显示为2021-03-02T00:00:00.000Z。如何将其转换为“M/d/yyyy”？

（在我的详细信息表中，我可以使用日期管道 {{risk.submission_date | date: 'M/d/yyyy'}} 执行此操作，但不能在更新表单上执行此操作，因为我使用的是

编辑每个特定的 Id。）

 this.crudService.GetRisk(this.getId).subscribe(res => {
      this.updateForm.setValue({ 
        submission_date: res['submission_date'],
        ...
        
this.updateForm = this.formBuilder.group({
      submission_date: ['', Validators.required],
      ...

<div class="card-body widget-body">
  <form [formGroup]="updateForm" (ngSubmit)="onUpdate()">
    <div class="form-group">
      <label for="input-12">Submission Date</label>
      <input type="text" class="form-control form-control-sm checking-field" formControlName="submission_date" required disabled>
      <span class="help-block text-danger" *ngIf="updateForm.get('submission_date').touched && updateForm.get('submission_date').hasError('required')">Date is required</span>                              
</div>
...

【问题讨论】：

标签： angular mongodb date crud utc

【解决方案1】：

从服务中获取数据后，可以在表单中设置之前格式化日期字符串。为此，您可以使用像 momentjs 这样的库。

import moment from 'moment';
...
this.crudService.GetRisk(this.getId).subscribe(res => {
      this.updateForm.setValue({ 
        submission_date: moment(res['submission_date']).format('YYYY/MM/DD'),
        ...

moment('2021-03-02T00:00:00.000Z').format('YYYY/MM/DD'); // => 03/02/2021

【讨论】：

太好了，谢谢！我只需将 "allowSyntheticDefaultImports": true 添加到 config.json 文件中。