Html 重新设计（提交）流程Angular2和Firebase页面

我正在尝试将Firebase应用到我昨天发现的 在“注册”页面中，当我单击“登录”时，请重新加载该页面，而不是执行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>

}

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

console.log(formarCorreo);

---

您可以将按钮的类型从submit更改为button，并将功能添加到单击按钮

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

type=submit将使元素重新加载表单默认情况下，html元素导航到其目标属性

为了覆盖这一点，因为这是您在单页应用程序中最希望看到的，angular提供了ngSubmit便利事件，它使用event.preventDefault，这将解决您的问题，但cleanear正在对服务器执行HTTP请求。这是一样的

---

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

这是不够的，因为大多数情况下，您需要提交的感觉，例如按enter键。@echonax what？：@echonax——我其实错了——对不起。我所说的问题是，如果表单中有一个按钮，但没有显式的type=submit，也就是说仍然会在表单中发布消息。将其设置为type=button确实可以像您所说的那样工作。很抱歉，我将删除我的评论！

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