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

Question

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

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

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

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

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

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

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

你知道如何实现这个目标吗？

提前致谢。

此致。

Answer 1

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

<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

Answer 2

在子组件中做这样的事情：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit{
  @Output() private onFormGroupChange = new EventEmitter<any>();


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

  public ngOnInit() { 
    this.onFormGroupChange.emit(this.employeeForm);
  }


}

和父组件： this.formCheck 是我们可以在 html.

中使用的实际 formGroup

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent { 
  formCheck :any  = '' 
  public onFormGroupChangeEvent(_event) {
    this.formCheck = _event;
    console.error(_event, this.formCheck['controls'])
  }
}

Demo

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

How to Send FormGroup Object as Output to Parent Component from child component n Angular

angular

typescript

angular6

angular-components

angular-forms