提交已取消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']);
}