Question

我在AngularJS中进行验证，如果有3种类型的错误，我会显示一个div。

如果需要，我只想在页面提交空值

时显示错误消息

<div class="error" data-ng-show="submitted && mainForm.email.$error.required" />

对于正则表达式验证，我希望它标记实时的默认行为。

<div class="error" data-ng-show="mainForm.email.$error.pattern" />

我面临的问题是最小长度。我不想在打字时显示它。这很令人讨厌，因为他们还没有完成打字。我也不想在提交时显示它，我认为为时已晚。当他们不再关注元素时，我想展示它。

如果//mainForm.email.$focus存在，我可以简单地执行此操作

<div class="error" data-ng-show="mainForm.email.$error.minlength && 
!mainForm.email.$focus"/>

任何人都知道有什么方法可以做这种检查或任何非抽出的替代方案吗？

谢谢！

Answer 1

是的，确实如此你可以使用ng Focus和ng Blur来实现这个目的

这是代码

<form name="mainForm">
    <span ng-show="mainForm.email.$error.pattern && !focus">error here</span>
    <input name="email" ng-pattern="..." ng-focus="focus=true" ng-blur="focus=false" type="text" />
</form>

ng Focus和ng Blur表达式和ngShow显示真实评估

Answer 2

您需要了解ModelOptions，debounce和updateOn可以延迟模型更改触发事件或触发DOM事件https://docs.angularjs.org/api/ng/directive/ngModelOptions上的更改

检查页面上的示例

<div ng-controller="ExampleController">
  <form name="userForm">
    Name:
    <input type="text" name="userName"
           ng-model="user.name"
           ng-model-options="{ updateOn: 'blur' }"
           ng-keyup="cancel($event)" /><br />

    Other data:
    <input type="text" ng-model="user.data" /><br />
  </form>
  <pre>user.name = <span ng-bind="user.name"></span></pre>
</div>

Answer 3

另一个简单的选择是：

 <input type="text"
        name="searchText"
        ng-model="searchText"
        ng-blur="searchIsInActive()"
        ng-click="searchIsActive()"                  
        placeholder="Search">

确定表单输入是否具有焦点

3 个答案: