angular 4表单域验证

Question

我有一个字段，我将它的最大长度设置为5。我定义了表单验证器，当用户输入超过5的时候，就会显示一条消息。因为我已经在字段上定义了maxlength，所以我不能输入超过5的值，并且它不会检测到输入的新值。如何检测输入的新键并显示消息。

html

<input type="text" formControlName="zCode" class="form-control" id="zCode" name="zCode" size="5" maxlength="5">

打字：

fb.group({'zCode': [null, Validators.compose([Validators.minLength(5), Validators.maxLength(5)});

Answer 1

好吧，如果用户不能输入超过5个字符，那么为什么要显示错误呢？这种类型的错误消息通常是为有角度最大长度限制而没有HTML最大长度限制的情况保留的。这样，当用户键入超过5个字符时，您就会给他们一个错误。在您的例子中，输入的字符甚至不能超过5个。在这两个地方都有maxlength并不是很有效，因为其中一个规则是“你不能输入超过5个字符”，而角度规则实际上是说“如果你输入超过5个字符，我会有一个错误”。你看到他们是如何矛盾的吗？我的建议是使用一个或另一个。但是，如果您想显示错误消息，则可以始终执行以下操作：

<form [formGroup]="form">
  <input type="text" formControlName="name" maxlength="5">
  <p *ngIf="form.controls.name.value.length === 5">You have reached your max character limit</p>
</form>

Answer 2

即使达到了最大长度值，onkeypress似乎仍然可以工作。

<input type="text" formControlName="zCode" class="form-control" id="zCode" name="zCode" size="5" maxlength="5" onkeypress="...">

在onkeypress事件中调用的函数中，您可以将事件作为对象传递给它，比如onkeypress="validateMe(evt)"，然后获取evt.keyCode，如果您想这样做的话，它可以用来显示最后按下的字符。您必须处理一些逻辑，这样用户就不会感到烦恼，因为按Backspace键(这样他们就可以纠正自己的错误)也会触发事件。