Question

所以，如果输入的文本不是七位数，我有一个输入字段发送一个标志。如果您尝试使用较短的字符串保存数据，我使用oninvalid给它一个自定义的错误消息。问题是，一旦触发，它将保留红色边框和错误消息，即使在输入有效字符串并再次按下保存按钮之后。没有自定义错误消息的字段工作正常可能导致此问题的任何想法，或强制它清除无效标志的方法？

值得注意的是，我实际上并没有使用提交调用，而是进行了angularJS调用。

<form name="myForm" class="myForm" required>
<input name="barcode_num" size="7" type="text" class="form-control" maxlength="7" ng-required="ctrl.barcodeRequired" ng-model="ctrl.barcode" pattern=".{0}|.{7}" oninvalid="this.setCustomValidity('Barcode must be exactly 7 characters')" />
....
<button ng-click="ctrl.submitButton()" type="submit">SAVE</button>
</form>

Answer 1

我建议您查看docs.angularjs.org/api/ng/type/form.FormController和docs.angularjs.org/guide/forms。这些细节如何使用内置的角度形式控制器来隐藏和显示错误和类。

基本上你可以使用span来表示错误，并使用内置的$error属性，你可以像这样显示消息：

<span ng-show="myForm.barcode_num.$invalid">Barcode must be exactly 7 characters</span>

在您的输入中，您可以使用ng-class让角度更新您的课程。您可以像这样添加红色边框的类：

<input ... ng-class="{ 'red-border-class': myForm.barcode_num.$invalid }" />

如果您仔细阅读这些文档，您会看到有许多不同的验证属性。您可以验证整个表单或每个命名输入。您还可以使用多个跨度来显示不同的错误消息。

从输入字段中删除无效标记

1 个答案: