Submitting an event on an Angular modal component

Question

Submitting an event on an Angular modal component

I recently created a modal component using the following template structure:

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

Within the ng content, I inserted a template using a service like this:

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

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

I am faced with the challenge of triggering a submit action in my modal component when the button in the footer section is clicked. The button within the form is not needed (perhaps I should hide it?), but I am struggling to find a solution to make this work. How can I resolve this dilemma?

javascript angular typescript

Answer 1

Answer №1

example

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

typescript code

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

Answer 2

example

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

typescript code

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

Submitting an event on an Angular modal component

Answer №1

Similar questions

X-Ray Rendering in Three.js and Webgl

Navigating through various arrays within objects on a JSON API with JavaScript: A walkthrough

The Angular service retrieves only the default values

Any ideas on how to format a date for jQuery Datepicker?

I am interested in incorporating a captcha system using ajax

Issue with Ionic and Angular: Struggling to empty input field

Differences between throwing errors, returning error objects, and using callbacks in Javascript

Guide on transferring files between Node.js/Express servers from receiving files at Server A to sending files to Server B

Steps for incorporating events on Jquery UI button

Utilize Typescript compiler to identify mistakes during object property access using square brackets

The Jquery css on my website is not functioning properly

Using both ngIf and ngFor in the same Angular2 template can lead to unexpected behavior and errors in the application

Top tips for maximizing efficiency with angular cicd jenkins and docker

Error alert: $.simpleWeather function not found

Troubleshooting: Why is my express-fileupload failing to upload images

Using Gulp Filter in Conjunction with Source Maps

Is it possible to reduce the number of calls to ngAfterContentChecked() and ngAfterViewChecked() instead of calling them repeatedly?

Error message found: "Uncaught TypeError: e[n] is undefined while setting up redux store in a reactjs application

The Angular 9 custom directive is malfunctioning on mobile devices

Ensure your HTML5 videos open in fullscreen mode automatically