时间戳

首页 > 解决方案 > 在 Angular 中转换更新 CRUD 表单日期

angular - 在 Angular 中转换更新 CRUD 表单日期

问题描述

当在 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'}} 执行此操作，但不能在更新表单上执行此操作，因为我使用的是 <form [formGroup]="updateForm " (ngSubmit)="onUpdate()"> 编辑每个特定的 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>
...

标签： angularmongodbdatecrudutc

解决方案

从服务中获取数据后，您可以在将日期字符串设置为表单之前对其进行格式化。您可以为此使用像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

推荐阅读