ngSubmit fires twice when submit button clicked

I’m submitting a … (check one with “x”)

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior Using @angular/forms and following the standard tutorial, if I click the submit button of my form, the ngSubmit() event is fired twice. This makes the handling of some HTTP request impossible.

Expected/desired behavior

The ngSubmit event shall be fired only once when <button type="submit"> is clicked.

Reproduction of the problem

I started creating a plunker. https://plnkr.co/edit/M5gqYy1ZyAKmsyPX57Zf?p=info However, I cannot test the code correctly, because import { provideForms } from '@angular/forms'; is pointing to a dead package. Please update your plunker dependencies.

Therefore, my code, as isolated as possible:

auth.component.html

<div class="login-container">
    <div id="auth-login">
      <form (ngSubmit)="submitAuth()" #authForm="ngForm">
        <img src="http://cdn.billy.mobi/assets/facebook-id-photo.png" class="img-responsive" />
        <div class="alert alert-error" *ngIf="errMsg">{{errMsg}}</div>
        <div class="form-row">
            <input type="email" placeholder="E-Mail" [(ngModel)]="email" name="email" #emailVal="ngModel" required />
          <span [hidden]="emailVal.valid || emailVal.pristine" class="form-warning">
              E-Mail is required
            </span>
        </div>
        <div class="form-row">
            <input type="password" placeholder="Password" [(ngModel)]="password" name="password" #passwordVal="ngModel" required />
            <span [hidden]="passwordVal.valid || passwordVal.pristine" class="form-warning">
              Password is required
            </span>
        </div>
        <div class="form-row">
          <button type="submit" class="form-elem-centered" [disabled]="!authForm.form.valid">login</button>
        </div>
      </form>
    </div>
</div>

auth.component.ts

import {Component} from '@angular/core';
import {Store} from '@ngrx/store';
import {Observable} from "rxjs/Rx";

// Reducers
import {SET_AUTH} from '../../reducers/auth.reducer';

// interfaces
import {IAuth, IAuthUser} from '../../interfaces/auth.interfaces';

// services
import {ApiService} from "../../services/api.service";

@Component({
    selector: 'auth',
    template: require('./auth.component.html'),
    styles: [require('./auth.component.scss')],
    directives: [],
    providers: [ApiService]
})
export class AuthComponent {

    auth:Observable<{}>;
    public errMsg: string = "";

    // form
    private email:string;
    private password:string;

    constructor(private store:Store<IAuth>, private api:ApiService) {
    }

    /**
     * Handles submit event of auth forn.
     */
    submitAuth() {
        console.log("trying login", this.email, this.password);
    }
}

This user seems to have the same problem:

• http://stackoverflow.com/questions/38138531/getting-the-same-values-2-times-in-console-angular2

We have discarded the following theses as origin of the problem:

• Component instantiated twice (and therefore event bindings applied twice)
• Observable subscriptions cause multiple event firing (no observables involved in custom code).
• Replacing the event (ngSubmit) with the standard (submit) event causes that the callback is only fired once.

Please tell us about your environment:

• Angular version: 2.0.0-rc.X
• Browser: [Chrome 51.0.2704.103 (64-bit) ]
• Language: [TypeScript]
• Built with: [Webpack]

[oddlyfunctional]

Hi, I’m using the recently released 2.0.1 version and this issue is still happening. disableDeprecatedForms and provideForms have been removed on the RC6, what can I do to prevent the submit to fire twice?

[slissner]

Thanks Roberto, worked perfectly! Sorry for avoidable question. However, probably helps others to solve the issue.