refresing der Seite auf (abschicken) Prozess Angular2 & Firebase

Question

Ich versuche Firebase zum Admin HTML template, die ich gestern Seite
im Register anzuwenden, wenn ich auf Anmelden klicken darin die Seite anstelle der Feuerbasis createUserWithEmailAndPass tun nachladen verarbeiten.

Dies ist mein 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> 

Und das meine Funktionen

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); 
    }); 
} 

}

Ich weiß nicht, warum, wenn ich "Confirmar registro" drücken es neu zu laden die Seite statt die Funktion zu tun. Nun geben Sie die Funktion bis

console.log(formarCorreo); 

Answer 1

Sie können den Typ der Schaltfläche button von submit ändern und fügen Sie die Funktion auf die Schaltflächen klicken

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

type="submit werden Elemente machen das Formular erneut zu laden

Answer 2

Standardmäßig navigieren html <form> Elemente zu ihrem target Attribut.

Um dies zu überschreiben (da dies ist, was Sie die meiste Zeit in einer Single-Page-App wollen), Winkel bietet die (ngSubmit) Convenience-Event (die event.preventDefault() verwendet, die Ihren Fall sowieso lösen würde, aber ist klar)

Answer 3

<button type="submit"> macht HTTP-Anfrage an den Server. Es ist das gleiche wie <input type="submit">.

Sie können es in gewöhnlichen <button> ändern oder verhindern, dass ein Formular mit Ereignissen gesendet wird.