Angular 触摸后所需输入的验证消息

Question

我正在使用 Angular 响应式表单并且我发现了 here 验证想法。这很好，但有一个问题。当表单为空并且我单击输入时，它将变得无效 class （红色）但不会显示任何错误消息。只有在我输入一些文本并将其删除后，消息才会到达。我想知道如何更改此 'if steatment' 使其正常工作

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

我只想添加错误消息，该消息将在我单击输入然后将其（仍然）留空后出现。你知道如何实现它吗？

Answer 1

你好，你能看看这个例子吗，这里实现表单验证

希望对你有帮助。

Answer 2

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

...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">

Answer 3

没有工作示例很难回答，但总的来说，我使用的逻辑与您正在做的事情相反。基本上，指定不显示错误的条件，否则始终显示错误。对我来说通常是

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

例如。另外，不要忘记 'pristine'.

Angular validation message for irequired input after touched