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

Question

我有一个名为 demo 的组件，演示组件有 3 个输入字段和一个 button.Like 这个：

单击按钮（i，e 提交）后，我导航到另一个名为 home 的组件。这种情况对我来说工作正常，但我为 [=40 添加了一些验证=] 和 电子邮件.

如果用户输入了所有必需的输入字段，则仅用于导航到另一个组件（即主页）。但它在没有 entering/validating 必需的输入字段的情况下导航。

在网上冲浪时我得到了一些例子：

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>

或

如果您不想禁用按钮，请从按钮中删除 [routerLink]="['../home']" 并在组件方法中添加验证条件，例如：-

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

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

Navigate to particular component only after filling required input fields

angular

angular-material

angular6

angular-forms