反应式表单正确地将表单值转换为模型对象作为列表答案

【问题标题】：Reactive Forms correctly convert Form Value to Model Object as List反应式表单正确地将表单值转换为模型对象作为列表
【发布时间】：2020-07-08 10:27:18
【问题描述】：

我正在尝试将提交的表单转换为对象。

我一直在使用以下帖子作为指导。

Reactive Forms correctly convert Form Value to Model Object

但是，该示例仅适用于单个对象，而不是对象列表。

我有一个Person 对象。

person.ts

export class Person {
    public constructor(init?: Partial<Person>) {
      Object.assign(this, init);
    }
    x: number;
    y: number;
    personId: number;
    firstName: string;
    lastName: string;
    email: string;
    companyName: string;
    staffCode: string;
  }

我在这里提交表单，并尝试将其转换为Person 对象。

approval-edit.component.ts

  public onSubmit(): void {
    const data: any = this.approvalEditFormGroup.value;
    console.log(data);
    this.person = new Person(this.approvalEditFormGroup.value);
    console.log(this.person);
  }

结果：

问题

如何将this.approvalEditFormGroup.value 转换为Person (Person[]) 的列表？

persons: Person[] = convert(this.approvalEditFormGroup.value);

【问题讨论】：

表单值是否根据屏幕截图中的第一个对象返回人员数组？
是的，截图是approval-edit.component.ts中console.log的结果

标签： javascript angular

【解决方案1】：

您只需要映射表单值并在表单值的每个项目上创建 Person 类的新实例像这样的

const data: any = this.approvalEditFormGroup.value;

persons: Person[] = Object.keys(data).map(key => new Person(data[key]));

【讨论】：