如何将一个表单组附加到另​​一个表单组？

Question

我有两个表单组：firstFormGroup和secondFormGroup

firstFormGroup在步骤1中，secondFormGroup在步骤2中。 现在，将其发布到后端时，我想将secondFormGroup附加到firstFormGroup

如何实现？

Answer 1

您可以从这些表格中获取值，然后使用Object.assign将它们合并为一个字典。

const data = Object.assign({}, firstFormGroup.value, secondFormFroup.value);

此外，您可以使用嵌套表单组

export class MyComponent implements OnInit {

  form = new FormGroup({
    first: new FormGroup({
      name: new FormControl('')
    }),
    second: new FormGroup({
      name: new FormControl('')
    })
  });
  constructor() { }

  ngOnInit() {
  }

}

然后在模板中

<form [formGroup]="form.get('first')"></form>
<form [formGroup]="form.get('second')"></form>

这样，即使您在多个步骤上具有使用相同键的控件，并且只有一种形式可以使用和验证，您也不会丢失任何数据。