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?

This may help: medium.com/@Zeroesandones/…

sean
– sean

2020-12-09 18:29:53 +00:00
Commented Dec 9, 2020 at 18:29 — sean
– sean, Commented Dec 9, 2020 at 18:29

iappwebdev · Accepted Answer · 2023-11-29 15:25:19Z

2

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

edited Nov 29, 2023 at 15:25

iappwebdev

5,9301 gold badge34 silver badges48 bronze badges

answered Dec 10, 2020 at 7:22

Nilesh Patel

3,3079 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular How to submit event on modal component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related