ngSubmit event not raised

ng-submit not working angular 7
angularjs submit form programmatically
angular 6 form submit example
angular submit form on button click
error export of name 'ngform not found
what is the use of ngsubmit in angular
f in angular
ngformoptions

I have the below simple angular template driven form which does not work (ngSubmit event does not seems to raise) when i use the the Angular material component, but the same does work when using bootstrap styled controls...The data model binding works in both cases, but with material components, the "authenticateUser" method is not called. I am sure missing something here....Any help is appreciated.

<div class ="login-container">
<form #loginForm="ngForm" (ngSubmit)="authenticateUser(loginForm)" >
    <div>
        <mat-form-field >
          <input matInput placeholder="Username" name="username" [(ngModel)]="username"  required>
        </mat-form-field>
    </div>
    <div>
        <mat-form-field>
          <input matInput placeholder="Password" name="password" [(ngModel)]="password" type="password" required>
        </mat-form-field>
    </div>  
</form>
<button mat-raised-button color="primary">Login</button>
<div style="margin-top: 5%">
    <a routerLink="/changepassword">Change Password</a>
</div>    

Angular Generated Form Model : {{loginForm.value | json}}

Thanks

jcm

Button type should be submit and it should be inside the form

<form #loginForm="ngForm" (ngSubmit)="authenticateUser(loginForm)" >
    <div>
        <mat-form-field >
          <input matInput placeholder="Username" name="username" [(ngModel)]="username"  required>
        </mat-form-field>
    </div>
    <div>
        <mat-form-field>
          <input matInput placeholder="Password" name="password" [(ngModel)]="password" type="password" required>
        </mat-form-field>
    </div>  

<button mat-raised-button color="primary" type="submit">Login</button>
</form>

[ngForm] does not raise (ngSubmit) like <form> does #7807 clicking a submit button), not from the outer table <form> itself (so that the event  However, ngSubmit ensures that the form doesn’t submit when the handler code throws (which is the default behaviour of submit) and causes an actual http post request. Let’s use ngSubmit instead as this is the best practice:

In your .html,

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)" id="ngForm">
  ....
</form>

<button form="ngForm" mat-icon-button type="submit" [disabled]="myForm.invalid">

In your .ts,

request : any;

onSubmit(form: FormGroup) {
    this.request = this.myForm.value;
    if (form.value.id != null) {
      this.service
        .put(this.request )
        .subscribe(
          () => {
          },
          err => {
            console.log("Error Occurred." + JSON.stringify(err));
          }
        );
    } else {
      this.service
        .create(this.request)
        .subscribe(
          () => {
            this.snackBarService.success("Successfully saved.");
          },
          err => {
            console.log("Error Occurred" + JSON.stringify(err));
          }
        );
    }
  }

I think this is exlpained in th docs, althoughit's not mentioned that you can prevent ng-submit should only fired for buttons with type="submit" set explicitly. is using form submit event to fire ng-submit - which makes sense). Overview. Enables binding AngularJS expressions to onsubmit events. Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.

You submit button must be inside the form

<div class ="login-container">
<form #loginForm="ngForm" (ngSubmit)="authenticateUser(loginForm)" >
    <div>
        <mat-form-field >
          <input matInput placeholder="Username" name="username" [(ngModel)]="username"  required>
        </mat-form-field>
    </div>
    <div>
        <mat-form-field>
          <input matInput placeholder="Password" name="password" [(ngModel)]="password" type="password" required>
        </mat-form-field>
    </div>  
    <button mat-raised-button color="primary" type="submit" >Login</button>
</form>

<div style="margin-top: 5%">
    <a routerLink="/changepassword">Change Password</a>
</div>   

To handle the submission, add an ngSubmit event to the form. Forms are not the only way we receive values from users. Simple DOM interactions, mouse clicks, and keyboard interactions can raise events that could lead to a request from  The ng-submit directive specifies a function to run when the form is submitted. If the form does not have an action ng-submit will prevent the form from being submitted. <form ng-submit="expression"></form> Supported by the <form> element. Parameter Values. A function to be called when the form is being submitted, or an expression to be

module twice but Angular does not like modules with circular references and raise the circular In the above NgForm example contains a ngSubmit event and​. Currently when you create a form with a submit handler either (ngSubmit) or (submit) the submit handler is called but the form also continues to do a regular submit which if you have not set any method or action values reloads the page with the data from the form in the url query.

Enables binding AngularJS expressions to onsubmit events. Warning: Be careful not to cause "double-submission" by using both the ngClick and ngSubmit​  In this tutorial, we'll learn to use the template-driven approach in Angular 9/8 to work with forms. We'll learn about the NgForm, ngModel and ngSubmit directives which are the essential concepts in template-based forms and how to create an authentication system with Node and Express.js

This in turn raises the ngSubmit event - which you can catch yourself if you need form valid or not in your click function <button mat-raised-button type="submit"​  The ngSubmit event emits the original form submission event. In template driven forms, all <form> tags are automatically tagged as NgForm . To import the FormsModule but skip its usage in some forms, for example, to use native HTML5 validation, add the ngNoForm and the <form> tags won't create an NgForm directive.

Comments
  • try to add button type="submit" and place the button inside the form tag
  • Thank you, it works now with your correction.
  • Thank you Sachila. It works now, though I dont have to add the type =Submit.
  • form need to identify which button to trigger if it has more than one button. So we need to specify a type submit to one button
  • Thanks. Like the idea of keeping the button outside the <form> tag.
  • @JCMenon great !
  • Thank you Sunil, it works when the button is placed within the <form>, and without the type=submit
  • Glad to hear that :) Updated the answer.