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

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