Angular如何在模态组件上提交事件答案

【问题标题】：Angular How to submit event on modal componentAngular如何在模态组件上提交事件
【发布时间】：2020-12-09 16:35:59
【问题描述】：

我有一个带有这个模板的模态组件：

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

我需要在我的模态组件中单击页脚部分上的按钮进行提交......我不需要表单内的按钮（我必须隐藏它吗？）但我找不到解决方案...我该如何解决这种情况？

【问题讨论】：

这可能会有所帮助：medium.com/@Zeroesandones/…

标签： javascript angular typescript

【解决方案1】：

模板

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

【讨论】：