如何在angular2中单击按钮时触发表单验证

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();
        }
    }

它没有按预期工作。

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

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;
    (...)
  }
}

这样，只有在提交表单后才能看到它们。