触摸后

Question

我正在使用Angular反应形式，我找到了here验证的想法。它非常好，但有一个问题。当表单为空并且我单击输入时，它将获得无效的类（红色）但不显示错误消息。只有在我输入一些文本并将其删除后，该消息才会到达。我想知道我怎么能改变这个“如果有人”的工作，因为它shoud

if (control && control.dirty && !control.valid) 

我只是想添加一条错误信息，这会在我点击输入然后将其（仍然）留空后发生。你有任何想法如何实现它吗？

Answer 1

如果将名称控制设置为以下：

...name: ["", [Validators.required],....

然后应该能够做到以下几点：

<span class="error" *ngIf="(user.get('username').touched && !user.get('username').value) ||  user.get('username').invalid">Error on username</span>

或者，如果您考虑布局更改（因为* ngIf会将其从DOM中删除），您可以使用反向逻辑应用[hidden]属性：

<span class="error" [hidden]="!user.get('username').touched || user.get('username').value || user.get('username').invalid">

Plunker

Answer 2

您好，您可以查看此示例，此处实现表单验证

Angular2 form validation

希望对你有所帮助。

Answer 3

如果没有一个有效的例子，很难回答，但总的来说，我使用与你正在做的相反的逻辑。基本上，指定不显示错误的条件，否则始终显示错误。对我来说通常是

 (!password.touched || (password.touched && password.valid))

例如。另外，不要忘记＆＃39; pristine＆＃39;。