Question

我有一个包含两个字段的表单：

<form name="form">
    <input type="email" ng-model-options="{ updateOn: blur }" required />
    <input type="password" ng-model-options="{ updateOn: blur }" required />
    <div ng-show="form.password.$error.required">Password required</div>
</form>

当密码字段为空时，始终显示错误div - 我只希望在密码已经聚焦然后模糊时显示。我可以做一个简单的改变来实现这个吗？

Answer 1

<div ng-show="form.password.$error.required && form.password.$dirty">Password required</div>

您可以通过添加脏字段的条件来完成此操作。因此，如果该字段将是污垢，那么只会显示错误

Answer 2

这应该使用$pristine属性。

<div ng-show="!form.password.$pristine && form.password.$error.required">Password required</div>

如果用户尚未与控件进行交互，则

$pristine将返回true。

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Answer 3

你需要$dirty（从默认值更改）或$touched（至少模糊一次，可能是您想要的，基于您的模型选项）。

实施例

form name="form">
    <input type="email" ng-model-options="{ updateOn: blur }" required />
    <input type="password" ng-model-options="{ updateOn: blur }" required />
    <div ng-messages="form.password.$error" ng-if="form.password.$touched">
      <div ng-message="required">Password required</div>
    </div>
</form>

我在这里使用ng-messages因为它很整洁，但您不必使用它，您只需将条件添加到ng-show / ng-if。

角形 - ＆＃34;必需＆＃34;使用ng-model-options

3 个答案:

实施例

参考