Angular How to submit event on modal component

Question

I have a modal component with this template:

  <div class="header"></div>
  <div class="body">
    <ng-content></ng-content>
  </div>
  <div class="footer">
    <button>Submit</button>
    <button>Cancel</button>
  </div>

In the ng content I pass with a service a template like this:

  <form  #contactForm="ngForm" (ngSubmit)="onSubmit()">
    /*some inputs */

    <button type="submit">Submit</button>
  </form>

I need to do a submit in my modal component on click on the button positioned on the footer section....I don't need the button inside the form (Must I hide it?) but I can't find a solution...How can I solve this situation?

Answer 1

template

<form #testForm="ngForm" (ngSubmit)="onSubmit(testForm)">

    <p>
        <label for="firstname">First Name</label>
        <input type="text" name="firstname" ngModel>
  </p>

    <p>
        <label for="lastname">Last Name</label>
        <input type="text" name="lastname" [(ngModel)]="lastname">
  </p>

        <p>
            <button type="submit">Submit</button>
        </p>

</form>

<button (click)="save()">Submit</button>

ts code

export class HelloComponent {
  title = "Template driven forms";
  lastname = "patel";
  @ViewChild(NgForm) testForm: NgForm;
  
  onSubmit(contactForm) {
    console.log(contactForm.value);
  }
  save(e) {
    this.testForm.onSubmit(e);
  }
}