Как передать formGroup дочерних компонентов в родительский компонент

Question

У меня так много форм различных компонентов на моей странице и одна единственная кнопка очистки (от родительского компонента), которая в основном просто очищает все поля ввода форм. Я не понимаю, как передать FormGroup дочернего компонента родительскому компоненту, чтобы я мог сбросить эти формы из родительского компонента.

Answer 1

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;
  }
}

2) Другой вариант - использовать ViewChild

в родительском компонент ts set @ViewChild, обратите внимание, что ViewChild доступен после инициализации представления:

export class AppComponent implements OnInit, AfterViewInit {
  title = "AngularTest";

  @ViewChild("childComponent", { static: false })
  testComponent1Component: TestComponent1Component;

  constructor() {}

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    console.log(this.testComponent1Component.myFormGroup);
  }
}

В родительском html:

<app-test-component1 #childComponent></app-test-component1>