Refresing the page using onsubmit event to process Angular 2 & Firebase

I'm trying to apply Firebase to the Admin HTML template that I found yesterday.

In the register page when I click on Sign in it reloads the page instead of doing the Firebase createUserWithEmailAndPass process.

This is my HTML code:

<form [formGroup]="form" (submit)="registrar(form.value)" class="form-horizontal">
  <div class="form-group row" [ngClass]="{'has-error': (!name.valid && name.touched), 'has-success': (name.valid && name.touched)}">
    <label for="inputName3" class="col-sm-2 control-label">Nombre</label>

    <div class="col-sm-10">
      <input [formControl]="name" type="text" class="form-control" id="inputName3" placeholder="Nombre completo">
    </div>
  </div>
  <div class="form-group row" [ngClass]="{'has-error': (!email.valid && email.touched), 'has-success': (email.valid && email.touched)}">
    <label for="inputEmail3" class="col-sm-2 control-label">NIF</label>

    <div class="col-sm-10">
      <input [formControl]="email" type="text" class="form-control" id="inputEmail3" placeholder="NIF/DNI">
    </div>
  </div>
  <div class="form-group row" [ngClass]="{'has-error': (!password.valid && password.touched), 'has-success': (password.valid && password.touched)}">
    <label for="inputPassword3" class="col-sm-2 control-label">Contraseña</label>

    <div class="col-sm-10">
      <input [formControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Introduce una contraseña">
    </div>
  </div>
  <div class="form-group row" [ngClass]="{'has-error': (!repeatPassword.valid && repeatPassword.touched), 'has-success': (repeatPassword.valid && repeatPassword.touched)}">
    <label for="inputPassword4" class="col-sm-2 control-label"></label>

    <div class="col-sm-10">
      <input [formControl]="repeatPassword" type="password" class="form-control" id="inputPassword4" placeholder="Repite la contraseña">
      <span *ngIf="!passwords.valid && (password.touched || repeatPassword.touched)" class="help-block sub-little-text">Las contraseñas no coinciden.</span>
    </div>
  </div>
  <div class="form-group row">
    <div class="offset-sm-2 col-sm-10">
      <button [disabled]="!form.valid" type="submit" class="btn btn-default btn-auth">Confirmar registro</button>
    </div>
  </div>
</form>

And this my functions:

nuevoUsuario(email, password) {
        console.log(email);
        return this.af.auth.createUser({
            email: email,
            password: password
        });
 }

public registrar(datos: Object): void {
    this.submitted = true;
    if (this.form.valid) {
      // your code goes here
     const formarCorreo = this.email.value +' @maimona.com';
      console.log(formarCorreo);
       
   this.afService.nuevoUsuario(formarCorreo.toLowerCase, 
       this.password).then((user) => {
          this.afService.saveUserInfoFromForm(formarCorreo.toLowerCase, 
         this.name, this.email).then(() => {
           // this.router.navigate(['login']);
         })
           .catch((error) => {
             this.error = error;
             console.log(error);
           });
       })
         .catch((error) => {
           this.error = error;
           console.log(error);
         });
    }
}

I don't know why. When I press "Confirmar registro" it reloads the page instead of doing the function. Well, it enters the function until

console.log(formarCorreo);

You can change the type of the button to button from submit and add the function to the buttons click

<button [disabled]="!form.valid" class="btn btn-default btn-auth"
type="button" <-- type
(click)="registrar(form.value)" <--click
>Confirmar registro</button>

type="submit will make elements to reload the form