How to send data from a component with no use of button to its parent in angular

I have host component and inside it there's three components(children). First child has a form with no submit button, while second child has again a form with submit button, Plus third child has just a plain text. Host component is rendering these children + a button that will send data gathered from forms to BE.

so the problem is when trying to use eventEmitter in second child it works fine I get data in host(parent), but in first child no, because there's no button to fire the eventEmmitter

so my question is how to send data from the first child if there's no button, is there any way to achieve that? or I should follow another strategy to do such thing child-two.component.html:

<form [formGroup]="teamForm">
<h4 class="title form-title">Basic Team Info</h4>

<!-- // TEAM NAME  -->
<div class="flex-column">
  <span class="label">Team Name</span>
  <mat-form-field appearance="outline">
    <input type="text" matInput placeholder="Taco Teams"formControlName="team_name" />
  </mat-form-field>
</div>

<!-- // CONTACT Number  -->
<div class="flex-row">
  <div class="flex-column">
    <span class="label">Team Contact Number</span>
    <mat-form-field appearance="outline">
      <input type="text" matInput placeholder="+84 2763 3627" formControlName="team_contactNum" />
      <mat-icon class="icon" matPrefix>call</mat-icon>
    </mat-form-field>
  </div>

  <!-- CATEGORY  -->
  <div class="flex-column">
    <span class="label">Category</span>
    <mat-form-field appearance="outline">
      <input type="text" matInput placeholder="UNDER 17" formControlName="team_category" />
      <mat-icon class="icon" matPrefix>location_on</mat-icon>
    </mat-form-field>
  </div>
</div>

and my host.component.html is like this:

 <section class="parent">
     <div class="div1">
    <app-child-one></app-child-one>

    <app-child-two (OpenPlayerFormEvent)="isPlayerFormOpenFn($event)"></app-child-two>

    @if (isPlayerFormOpen) { <app-child-three></app-child-three> }

    <div class="add-team-btn-container">
      <a href="/somewhere..." class="skip-btn" href="">add teams later</a>
    // this button will use all data from childreen 1 and 2 and send it to BE
      <button class="add-team-btn" mat-flat-button (click)="add_team()"> Add team </button>
    </div>

  </div>
</section>

Initialize the form fields on the parent itself, then pass this form as an input to the child component, then the form will update when the values are present.

In the parent, define form groups for each sub component.

mainForm = new FormGroup({
  childOneForm: new FormGroup({
    team_name: new FormControl(''),
    team_contactNum: new FormControl(''),
    team_category: new FormControl(''),
  }),
  childTwoForm: new FormGroup({ ... }),
  childThreeForm: new FormGroup({ ... }),
});

getChildForm(formGroupName: string) {
  return mainForm.get(formGroupName) as FOrmGroup<any>;
}

The only catch in this approach, is you cannot hide component using @if since it destroys the component (with reactive forms, this causes bugs) so you need to use [hidden] (to hide without destroying).

<section class="parent">
    <div class="div1">
        <form [formGroup]="mainForm">
            <app-child-one [form]="getChildForm('childOneForm')"></app-child-one>
            <app-child-two
                [form]="getChildForm('childTwoForm')"
                (OpenPlayerFormEvent)="isPlayerFormOpenFn($event)"
            ></app-child-two>
            <div [hidden]="!isPlayerFormOpen">
                <app-child-three [form]="getChildForm('childThreeForm')"></app-child-three>
            </div>
        </form>
        <div class="add-team-btn-container">
            <a href="/somewhere..." class="skip-btn" href="">add teams later</a>
            // this button will use all data from childreen 1 and 2 and send it to BE
            <button class="add-team-btn" mat-flat-button (click)="add_team()">Add team</button>
        </div>
    </div>
</section>

Then we can use this @Input form and use it as any other form.

<form [formGroup]="form">
    <h4 class="title form-title">Basic Team Info</h4>

    <!-- // TEAM NAME  -->
    <div class="flex-column">
        <span class="label">Team Name</span>
        <mat-form-field appearance="outline">
            <input type="text" matInput placeholder="Taco Teams" formControlName="team_name" />
        </mat-form-field>
    </div>

    <!-- // CONTACT Number  -->
    <div class="flex-row">
        <div class="flex-column">
            <span class="label">Team Contact Number</span>
            <mat-form-field appearance="outline">
                <input
                    type="text"
                    matInput
                    placeholder="+84 2763 3627"
                    formControlName="team_contactNum"
                />
                <mat-icon class="icon" matPrefix>call</mat-icon>
            </mat-form-field>
        </div>

        <!-- CATEGORY  -->
        <div class="flex-column">
            <span class="label">Category</span>
            <mat-form-field appearance="outline">
                <input
                    type="text"
                    matInput
                    placeholder="UNDER 17"
                    formControlName="team_category"
                />
                <mat-icon class="icon" matPrefix>location_on</mat-icon>
            </mat-form-field>
        </div>
    </div>
</form>

There is a more elegant approach using ControlContainer, if you would like to explore this, checkout the below article.

Nested forms with ControlContainer