如何在Angular 2中通过按钮点击触发表单验证

Question

我正在开发一个Angular2应用程序，在其中我需要对输入字段进行验证。

这里有相同的代码。

http://plnkr.co/edit/6RkM0eRftf3KQpoDCktz?p=preview

这个对我来说很好用，但我想在按钮点击时触发验证，并显示所有无效的验证消息。

目前它是在我点击字段时激活的。

我已经尝试过这个。

saveUser() {
        if (this.userForm.valid) {
            alert(`Name: ${this.userForm.value.name} Email: ${this.userForm.value.email}`);
        } else {
            this.userForm.validator();
        }
    }

它没有按预期工作。

我如何在按钮点击时触发这些验证，我希望按钮始终处于活动状态。

- Rhushikesh

Answer 1

你可以尝试利用表单控件的 submitted 属性来显示错误信息。这个属性可以在相应的 ngIf 中使用，以显示这些消息。

<span *ngIf="submitted && !this.userForm.controls.email.valid">...</span>

您需要将submitted属性默认初始化为false，并在调用saveUser方法时将其设置为true：

@Component({
})
export class SomeComponent {
  constructor() {
    this.submitted = false;
  }

  saveUser() {
    this.submitted = true;
    (...)
  }
}

这样，它们只有在表单提交后才会显示。

- Thierry Templier

---

请问您能否提供更多关于如何完成此操作的详细信息？ - Rhushikesh

无法在“controlmessages.component”中处理“get errorMessage”，以便它适用于所有位置吗？ - Rhushikesh

否则我需要在各处都这样做。 - Rhushikesh

是的，但你需要自己管理所提交的属性。也就是说，你可以直接在表单控制器上设置它。如果你在控制消息组件中有访问权限，你就不需要为此添加另一个参数了... - Thierry Templier