仅在填写必需的输入字段后导航到特定组件

Question

我有一个名为demo的组件，演示组件有3个输入字段和一个按钮。例如：

单击按钮（即提交）后，我导航到另一个名为home的组件。这种情况对我来说很好，但是我添加了对名字/姓氏的验证strong>和电子邮件。

如果用户输入了所有必需的输入字段，那么只有它可以导航到另一个组件（即家）。但是，它在导航时没有输入/验证必需的输入字段。

在冲浪时，我有一些例子：

1）Example 1
2）Example 2

但是这些是针对template-driven forms的。我正在使用反应形式。

这里是Stakcblitz DEMO。

Answer 1

将按钮设为无效，因为该表格有效

<button mat-raised-button  type="submit" color="primary" [disabled]="!addForm.valid"  (click)="onaddCustomer()">Submit</button>

并在点击功能中导航

onaddCustomer(){

this.router.navigate(['/home']);

}

不使用[disabled]

检查表单在点击功能中是否有效

<button mat-raised-button  type="submit" color="primary"   (click)="onaddCustomer()">Submit</button>

和点击功能

onaddCustomer(){

if(this.addForm.valid){
this.router.navigate(['/home']);
    }
 }

Answer 2

只需禁用提交按钮，直到表单有效，就无需其他更改。

就像[disabled]="!addForm.valid"，即在您的情况下：-

<button mat-raised-button [routerLink]="['../home']" type="submit" color="primary" [disabled]="!addForm.valid" (click)="onaddCustomer()">Submit</button>

OR

如果您不想禁用按钮，则从按钮中删除[routerLink]="['../home']"，然后在component方法中添加一个验证条件，例如：-

onaddCustomer（）{

if（this.addForm.invalid）{return; }

this.router.navigate（['/ home']）;

}

Answer 3

如果禁用“仅提交”按钮，则在提交表单时在输入中按回车键可能会导致问题。如果您正确构造了表单（作为响应表单），则可以在表单提交上使用一个函数。

<form [formGroup]="yourReactiveFormGroup" (ngSubmit)="onSubmit()">
  ...
</form>

并在onSubmit()函数中：

onSubmit() {

    // Stop if invalid
    if (this.yourReactiveFormGroup.invalid) {
        return;
    }

    this.router.navigate(['/your-route']);
}