Как реализовать сервис в реактивных формах

Question

Я разрабатываю приложение Angular, в котором у меня есть один родительский компонент и несколько дочерних компонентов. Каждый с реактивной формой. Как и у меня, много полей формы и множество лог c для их реализации. Я пытаюсь использовать службу Angular для реализации каждого дочернего компонента в службе. Поскольку я новичок в Angular, мне нужна помощь в том, как его реализовать. пожалуйста, направьте меня.

ParentComponent. Html

<form class="parentForm" [formGroup]="parentForm">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test0"
        />
      </div>
    </div>
  </div>
  <app-child></app-child>
</form>

ChildComponent. HTML

<form [formGroup]="childForm">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test"
        />
      </div>
      <div class="col-md-12">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test1"
       />
      </div>
    </div>
  </div>
</form>

ParentComponent.ts

export class ParentComponent implements OnInit{
ngOnInit(): void {
this.parentForm = this.fb.group({
test0: [''],
// Instead of this i want to implement a service here.
// this.ChildFormService. childFormInit();
childForm: this.fb.group({
test: [''],
test1: [''],
})
}
}

ChildFormService

import { Injectable } from '@angular/core';
import {FormGroup, FormBuilder} from '@angular/forms';

@Injectable({
  providedIn: 'root',
})
export class ChildFormService {

  constructor(private fb: FormBuilder) { }

  childFormInit() {
    childForm: this.fb.group({
      test: [''],
      test1: [''],
    });
  }
}