使用 Angular 表单取消提交

Question

在表单中，我有一个按钮，单击该按钮时，它应该提交表单并同时使用 routerLink 重定向到另一个组件。

这是我所拥有的：

    <div class="container-fluid padding_elementos">
    <div class="row">
        <div class="card align-self-center">
            <div class="card-body">
                <form [formGroup]="forma" (ngSubmit)="saveChanges()">
                              <div class="form-group">
                                <label for="exampleInputEmail1">Correo Electrónico:</label>
                                <input type="email" class="form-control" placeholder="E-mail"
                                type="text"
                                formControlName="Correo">

                              </div>
                              <hr>
                              <div class="form-group">
                                <input type="password" class="form-control"  placeholder="Nueva Contraseña" formControlName="Password">
                                <br>
                                <input type="password" class="form-control"  placeholder="Repite Contraseña"
                                name="samePassword" formControlName="SamePassword">

                              </div>

                              <button type="submit" class="btn btn-primary btn-block" [routerLink]="['/login']">Guardar</button>
                </form>
                <br>
                {{forma.valid}}
            </div>
        </div>
    </div>
</div>

在我的 TS 文件中：

    this.forma = new FormGroup({
  'Correo': new FormControl('', Validators.required),
  'Password': new FormControl('', Validators.required),
  'SamePassword': new FormControl()
})
  guardarCambios(){
console.log(this.forma.value)
this.forma.reset();}

提交效果很好，但是当我添加 routerLink 时，我收到以下消息：

表单提交因表单未连接而取消

它不提交任何东西。我做错了什么？

Answer 1

您已绑定到表单的提交事件

(ngSubmit)="saveChanges()"

既然你这样做了，你不应该从你的按钮重定向，而是从你的组件。

向路由器添加依赖项

constructor(private router: Router) {}

在你的函数中

saveChanges() {
  // ... Do what you have to do then
  this.router.navigate(['/login']);
}