Question

我正在尝试将Firebase应用到我昨天发现的Admin HTML template 在注册页面中，当我单击登录时，重新加载页面而不是执行firebase createUserWithEmailAndPass过程。

这是我的HTML代码：

<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>

这是我的功能

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

}

我不知道为什么当我按下“Confirmar registro”时它重新加载页面而不是执行该功能。好吧，它进入函数直到

console.log(formarCorreo);

Answer 1

您可以从button将按钮类型更改为submit，然后将功能添加到按钮中

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

type="submit将使元素重新加载表单

Answer 2

默认情况下，html <form>元素会导航至其target属性。

要覆盖此项（因为这是您在单页应用中大多数时间都需要的），angular会提供(ngSubmit)便利事件（使用event.preventDefault()，这将解决您的问题无论如何，但是是清洁的）

Answer 3

<button type="submit">正在向服务器发出HTTP请求。它与<input type="submit">相同。

您可以将其更改为普通<button>或阻止使用事件提交表单。

改写（提交）过程页面Angular2＆amp;火力地堡

3 个答案: