0

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

在我使用响应式表单转换日期格式的示例代码中，当我第一次从 datepicker 中选择日期时它正在工作。但是，当我之后编辑其他输入字段时，之前输入的日期值返回到 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, [Validators.required]),
          end: this.formBuilder.control(null, [Validators.required]),
        });
      }
    
      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>

请建议。

4

1 回答 1

0

我在格式化日期时遇到了类似的问题，这就是我想出的：（我不使用 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（不适合示例，但提供 ua 提示）：

datetimeVal: Date;
          
  this.formattedIsoTime = this.datetimeVal.toISOString();
  this.formattedLocaleTime = this.datetimeVal.toLocaleDateString() 
  this.formattedUTCTime =   this.datetimeVal.toUTCString();
于 2021-03-26T07:57:51.630 回答