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

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

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

1 个答案: