Angular2 form page reloads?

Question

I am using Angular2

unable to figure out why page is refereshing:

My Form:

<form>
                        <div class="form-group">
                            <label class="form-label">Username</label>
                            <input type="email" class="form-control" id="username" placeholder="Email" name="username" />
                        </div>
                        <div class="form-group">
                            <label class="form-label">Password</label>
                            <input type="password" class="form-control" id="password" placeholder="Password" name="password" />
                        </div>
<input type="submit" class="btn btn-primary mr-3" (click)=onSubmit() />


                    </form>

In Ts:

import { Component} from '@angular/core';

declare var $: any; declare var jQuery: any;

@Component({ selector: 'cat-page', templateUrl: './login-alpha.html' })

export class PagesLoginAlpha{

onSubmit()
{
    console.log("in submittt");
}

}

Answer 1

Change the type to button

<input type="button" class="btn btn-primary mr-3" (click)="onSubmit()" />

Or use button

<button type="button" (click)="onSubmit()">submit</button>