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

这样它们只有在表单提交后才可见。