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

Question

我有两个表单组：firstFormGroup和secondFormGroup

firstFormGroup在垫子步骤 1secondFormGroup中，在垫子步骤 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>

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