我如何将子组件的formGroup传递给父组件

Question

我的页面中有这么多形式的不同组件，还有一个清除按钮（来自父组件），它基本上只清除表单的所有输入字段。我坚持如何将子组件的FormGroup传递给父组件，以便可以从父组件重置那些表单。

Answer 1

您需要EventEmitter，您可以在子组件中初始化表单组并将其发送给父父组件。

在您的子组件中：

export class TestComponent1Component implements OnInit {

  // Crete EventEmitter
  eventEmitter = new EventEmitter<FormGroup>();

  myFormGroup: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {

    this.myFormGroup = this.fb.group({
      someControl: new FormControl("TestValue"),
    });

    this.eventEmitter.emit(this.myFormGroup);
  }

}

然后在您的父组件HTML中：

<app-test-component1 (eventEmitter)="eventListener($event)"></app-test-component1>

并且在您的父组件ts文件中：

export class AppComponent implements OnInit {
  title = "AngularTestApp";

  private childFormGroup: FormGroup;

  constructor() {}

  ngOnInit(): void {}

  eventListener(formGroup: FormGroup) {
    this.childFormGroup = formGroup;
  }
}