CODEWITHSUNDEEP
javascriptangulartypescript
Andy88
Andy88

Reputation: 757

Angular How to submit event on modal component

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?

Upvotes: 1

Views: 981

Answers (1)

Nilesh Patel
Nilesh Patel

Reputation: 3317

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

Upvotes: 2

Related Questions