反应式表单类型与数据不匹配答案

【问题标题】：Reactive Forms type mismatch with data反应式表单类型与数据不匹配
【发布时间】：2020-06-07 00:07:15
【问题描述】：

我发现很多时候，我获取/发布到我的 Web 服务的数据结构与我的表单所需的数据结构之间存在细微差别。使用反应式表单时处理不匹配的最佳方法是什么。我可以在表单组中的单个属性上使用某种 getter/setter 吗？我将使用什么作为 formGroup 名称？

现在我正在编写两个转换函数 - 一个从我的数据模型到我的 formModel，在我可以修补 formGroup 之前运行 onInit，另一个从我的 formModel 到我在保存时运行的 dataModel，然后我可以将数据发回

例如，我的网络服务获取/发布此结构有几秒钟，但 UI 请求是几天。

interface Request
{
   name:string, 
   description:string, 
   processBy: number //the number of seconds
}

但用户界面只会要求几天

interface formModel 
{
   name:string, 
   description:string, 
   processByDays: number 
}

<input type="number" formControlName="processByDays" />

我在使用需要数组的自定义列表控件时遇到了类似的问题，但我的数据是一个标量，所以我有一堆笨拙的代码来包装/解开一个标量值。

【问题讨论】：

您不应在表单中处理此转换。处理保存数据的服务中的转换。这个问题没有通用的解决方案。

标签： angular angular-reactive-forms type-mismatch

【解决方案1】：

这个问题没有通用的解决方案。但是，您不应该在表单中或表单周围处理这种转换。处理保存数据的服务中的转换。您需要为每个字段执行此操作，因为它是特定于您的业务逻辑的转换。

@Injectable() export class DataService {
  save(data: FormModel): Observable<void> {
    const {processByDays, ...saveAsIs} = data;
    const saveModel: Request = {
      ...saveAsIs,
      processBy: processByDays * 24 * 60 ** 2
    };

    return this.http.post(myURL, saveModel);
  }
}

您可以使用Moment.js 来提高可读性。

import moment from 'moment';

const {processByDays, ...saveAsIs} = data;

const saveModel: Request = {
  ...saveAsIs,
  processBy: moment.duration(processByDays, 'days').asSeconds()
};

【讨论】：