如何触发按钮单击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> 

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

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

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

这样，他们将在表单被提交后，才可见。