Question

我有一个字段，我将其maxlength设置为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个，那么为什么会显示错误？这种类型的错误消息通常保留用于您具有ANGULAR最大长度限制但不具有HTML maxlength限制的情况。这样，当用户输入超过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

即使达到maxlength值，

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键（这样他们可以纠正错误）也会触发事件。

角4形式场验证

2 个答案: