Дата формата Angular 6 из средства выбора даты в реактивной форме

Я пытаюсь использовать Angular 6 с реактивными формами и форматировать значение даты, полученное от средств выбора даты, которое будет передано на следующий этап.

В примере кода, где я использую реактивную форму для преобразования формата даты, она работала, когда я впервые выбрал дату из средства выбора даты. Однако, когда я впоследствии редактирую другие поля ввода, предыдущее введенное значение даты вернулось к объекту момента, и только последняя выбранная дата была в правильном формате.

Ожидаемый результат (пример):

{ 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]}

Код ТС:

    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>

Пожалуйста, предложите.


angular angular-reactive-forms formarray mat-datepicker angular-formbuilder
person abasasa1234    schedule 15.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У меня была аналогичная проблема с форматированием даты, и вот что я придумал: (я не использую 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();
person dino    schedule 26.03.2021