时间戳

首页 > 解决方案 > 如何从子组件 n Angular 将 FormGroup 对象作为输出发送到父组件

angular - 如何从子组件 n Angular 将 FormGroup 对象作为输出发送到父组件

问题描述

我在表单中工作，我有两个组件：我的子组件包含这个 formGroup Object ：

employeeForm : FormGroup;
this.employeeForm = new FormGroup({
       firstName:new FormControl(),
       lastNAme:new FormControl(),
       email:new FormControl()
    });

子组件只包含表单的一小部分，父组件包含带有提交按钮的全局表单。

我的问题是：我想在父组件中单击提交按钮时从子组件中获取表单组并将其推送到父组件中的全局表单。

我在我的子组件中添加输出：

@Output() onFormGroupChange: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();

但我不知道如何让父 Comp 中的提交按钮从我的子组件中获取 FormGroup 对象并继续推送数据......

您对如何实现这一目标有任何想法吗？

提前致谢。

此致。

标签： angulartypescriptangular6angular-componentsangular-forms

解决方案

您可以将父表单传递给子组件：

<form [formGroup]="parentForm">
   <child-form [form]="parentForm"></child-form>

   <button (click)="submit()">Submit</button>
</form>

在 child-form.component.ts 中，可以使用 addControl：

@Input() form; // this is parentForm

constructor(private fb: FormBuilder) { }

ngOnInit() {
   this.form.addControl('firstName', new FormControl('', Validators.required));
}

单击提交时，您也可以从子组件中获取表单数据：

this.parentForm.value

推荐阅读