CODEWITHSUNDEEP
angular
GergelyPolonkai
GergelyPolonkai

Reputation: 6421

Angular2 form gets submitted instead of running the onSubmit() method

I have the following component:

Template

<div class="hide" id="login-contents">
    <form *ngIf="!current_user" role="form" (ngSubmit)="onSubmit()" #loginForm="ngForm">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text"
                   #username
                   id="username"
                   class="form-control"
                   required
                   placeholder="Username">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password"
                   #password
                   id="password"
                   class="form-control"
                   required
                   placeholder="Password">
        </div>
        <button type="submit"
                class="btn btn-block btn-primary"
                [disabled]="!loginForm.form.valid">Login</button>
    </form>
</div>

Component Typescript

@Component({
    selector: 'login-form',
    templateUrl: '/app/form.login.html'
})
export class LoginFormComponent implements OnInit {
    submitted = false;

    ngOnInit() {
        console.log("Form initialised");
    }

    onSubmit(event: any, username: string, password: string) {
        event.preventDefault();
        console.log('onSubmit');
        this.submitted = true;
        return false;
    }
}

According to the onInit stuff (added for debugging reasons), the form component gets loaded (of course, as I see the form itself). The preventDefault() calls and return false are my tries to prevent an actual submit (and thus, a full page reload) that happens when I press the Login button. Also, the Login button is not disabled, even when the form is not filled (and thus, is not valid).

I already tried to use <button type="button"> instead of type="submit", but the onSubmit() method doesn’t get called. The same happens (or more like not happens) if I move the (ngsubmit)="onSubmit()" to the button as (click)="onSubmit()". I start to suspect the problem is somewhere deeper, not even in this component.

What may I miss? I’m using 2.0.0-rc.6.

Upvotes: 4

Views: 2998

Answers (4)

MADJAR
MADJAR

Reputation: 67

You can solve this by using the (submit) command like so

<form #frm="ngForm" (submit)="submit(value)">
...
</form>

Upvotes: 0

Guntram
Guntram

Reputation: 980

I had the problem, that submitting the form was doing a REST call to a dev server called json-server (https://github.com/typicode/json-server) - and the app was running using angular-cli's ng serve command. And despite writing event.preventDefault(), the page was doing a reload! (No matter if coming from <form (ngSubmit)="onSubmit($event)"> or <button (click)="onSubmit()">!)

The problem was, that the json-server is extremely smart and modifies the json file you let it serve! And this triggers the ng-serve-watcher - because my served json file resided inside my application codes /assets folder ;)

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657741

Use 

 <button type="button" (click)="onSubmit()"

instead of

 <button type="submit"

Upvotes: 2

BeetleJuice
BeetleJuice

Reputation: 40916

If @Gunter's suggestion doesn't work, you can always just take control of what happens. Remove (ngSubmit)="onSubmit()", and in the <button>, do

<button (click)="onSubmit()"...

Upvotes: 1

Related Questions