Блог

У меня есть модальный компонент с этим шаблоном:

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

В содержимом ng я передаю со службой шаблон, подобный этому:

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

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

Мне нужно выполнить отправку в моем модальном компоненте, нажав на кнопку, расположенную в разделе нижнего колонтитула….Мне не нужна кнопка внутри формы (я должен ее скрыть?), Но я не могу найти решение…Как я могу решить эту ситуацию?

шаблон

 <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-код

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