来自日期选择器的响应形式的 Angular 6 格式日期

问题描述

我正在尝试将 Angular 6 与反应形式一起使用，并格式化从日期选择器获取的日期值，该日期值将被传递到下一阶段。

在我使用反应形式转换日期格式的示例代码中，当我第一次从日期选择器中选择日期时，它正在工作。但是，当我之后编辑其他输入字段时，之前输入的日期值返回到 Moment 对象，并且只有最后选择的日期格式正确。

预期结果（示例）：

{ users: [name: a,start: 2021/11/20,end: 2022/10/15]}

实际结果：

{ users: [name: a,start:  Moment {_isAMomentObject: true,_i: {…},_isUTC: false,_pf: {…},_locale: Locale,…},end: 2022/10/15]}

TS 代码：

    userForm: FormGroup;

    ngOnInit() {
        this.createuserForm();
      }
    
      createuserForm() {
        this.userForm = this.formBuilder.group({
          users: this.formBuilder.array([this.createEachUser()])
        });
      }
      createEachUser(): any {
        return this.formBuilder.group({
          name: this.formBuilder.control(null,[Validators.required]),start: this.formBuilder.control(null,end: this.formBuilder.control(null,});
      }
    
      convertDate(moment,startend,i) {
        const date = moment.value['_d'];                               // moment is Moment Object
        const newDate = new Date(date).toISOString().split('T')[0]; // ex: 2021/11/20
        this.userForm.value.users[i][startend] = newDate;
      }
    
      submit() {
        console.log(this.userForm.value)
      }

HTML：

<form (ngSubmit)="submit()" [formGroup]="userForm" novalidate>
  <div formArrayName="users" *ngFor="let user of userForm.controls.users?.value; let i = index;">
    <div class="col">
      <label class="label">Name:</label>
      <input class="form-control" type="text" id="name" name="name" formControlName="name" required>
    </div>

    <div class="col">
      <label class="label">Start:</label>
      <input class="form-control" [matDatepicker]="startpicker" (click)="startpicker.open()" id="start" name="start" formControlName="start" (dateChange)="convertDate($event,'start',i)" required>
      <mat-datepicker-toggle matSuffix [for]="startpicker"></mat-datepicker-toggle>
      <mat-datepicker #startpicker></mat-datepicker>
    </div>

    <div class="col">
      <label class="label">End:</label>
      <input class="form-control" [matDatepicker]="endpicker" (click)="endpicker.open()" id="end" name="end" formControlName="end" (dateChange)="convertDate($event,'end',i)" required>
      <mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>
      <mat-datepicker #endpicker></mat-datepicker>
    </div>
  </div>

  <button type="submit">submit</button>
</form>

请提出建议。

解决方法

我在格式化日期时遇到了类似的问题，这就是我想出的：（我不使用 mat-datepicker）

HTML

<form [formGroup]="form">
    <br>
    <input formControlName="date" id="date" type="date" />
    <br>
     {{form.value.date | date: 'yyyy/MM/dd' }} 
</form>

.TS

import { Component } from '@angular/core';
import { FormBuilder,FormGroup } from '@angular/forms';

@Component({
  selector: 'app-date',templateUrl: './date.component.html',styleUrls: ['./date.component.scss']
})
export class DateComponent {

  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      date: ['']
    });
  }

}

添加验证器：

date: ['',Validators.requiredTrue]

对于不同类型的日期格式，请查看：https://angular.io/api/common/DatePipe

在代码中格式化日期看看这个API（不适合这个例子但给你一个提示）：

datetimeVal: Date;
          
  this.formattedIsoTime = this.datetimeVal.toISOString();
  this.formattedLocaleTime = this.datetimeVal.toLocaleDateString() 
  this.formattedUTCTime =   this.datetimeVal.toUTCString();