Angular - 如何以反应形式组合数据？答案

【问题标题】：Angular - How to compose data in reactive form?Angular - 如何以反应形式组合数据？
【发布时间】：2021-04-15 11:20:45
【问题描述】：

我有一个 http post 服务，它需要这种格式的日期和时间：

YYYY-MM-DDTHH:MM:SSZ

现在在一个表单中，我有一个这样的 formGroup：

this.formBuilder.group({
  name: [''],
  startDate: [null],
})

但在表单中我有三个输入：

<form [formGroup]="myForm">
 <input type="text" formControlName="name">
 <mat-datepicker formControlName="day?"></mat-datepicker>
 <input type="number" formControlName="hour?">
 <input type="number" formcontrolName="minutes?">
<form>

我有一个用于选择日期的日期选择器和两个用于管理小时和分钟的输入。我的想法是这样转换formGroup：

this.formBuilder.group({
   name: [''],
   day: [null],
   hour: [null],
   minutes: [null]
})

但是服务器只需要一个字段，我会有一种干净的方法来做到这一点...我的想法是创建单个字段来管理每个值，并在提交时以某种方式组合数据，还是有其他解决方案？

【问题讨论】：

标签： javascript angular angular-reactive-forms

【解决方案1】：

就个人而言 - 我会创建一个单独的组件来实现ControlValueAccessor（请参阅docs）。它将包含您的三个输入，但将作为单个表单控件工作（即在任何“子”输入发出时发出）。然后，您的表单将保留它的“正确”格式：

this.formBuilder.group({
  name: [''],
  startDate: [null],
})

你的模板看起来像这样：

<form [formGroup]="myForm">
 <input type="text" formControlName="name">
 <app-custom-date-picker formControlName="startDate"></app-custom-date-picker>
<form>

我认为这将是最“干净”的方法，如果需要，您可以在多种其他形式中重复使用该组件。

我不会详细介绍如何创建您的自定义表单控件（即实现 ControlValueAccessor，因为这已被网络上的多个重要指南所涵盖。

【讨论】：

【解决方案2】：

我建议使用 Angular Material Datepicker。它与formBuilder 配合得非常好：https://material.angular.io/components/datepicker/overview

检查一下，stackblitz，我用newDate = new Date(); 填充mat-datepicker：

https://stackblitz.com/edit/angular-oyxsqm?file=src%2Fapp%2Fdatepicker-overview-example.ts

【讨论】：