Question

我已经搜索过所有的解决方案，所以这是我对本网站的第一个问题：

我正试图在角度（离子）页面中进行一些很好的验证，其中逻辑是我要显示＆＃34; Required＆＃34;当有任何验证错误（$error.required）或该字段未被触及且为空（如第一次加载）时，标签下的消息。我可以使用pristine来检查它是否未被修改，但如果表单随后从模型中加载值（例如从localstorage恢复时），它仍会显示＆＃34; required＆＃ 34;验证消息。

我尝试了以下内容：

＆＃13;

<form name="wdform" novalidate>
<label class="item item-input item-stacked-label">
<span class="input-label green-small">ID</span>
<div class="validation" ng-show="wdform.userid.$error.required ||
(wdform.userid.$pristine && wdform.userid.length < 1)" >
  Required 
</div>
<input name="userid" ng-model="input.UserID" type="text" required>
</label> 
  ... rest of form...
</form>

＆＃13;

＆＃13; 也试过了：

＆＃13;

<div class="validation" ng-show="wdform.userid.$error.required ||
(wdform.userid.$pristine && input.UserID.length < 1)" >

＆＃13;

以及其他各种排列，例如：

(wdform.userid.$pristine && input.UserID == '')

(wdform.userid.$pristine && wdform.userid.$invalid)

etc. ad nauseum.

在一个单独但相关的说明中，我还发现内置验证在表单和字段名称方面非常脆弱......如果表单名称只是小写和/或它，它似乎只能起作用不包含任何特殊字符（＆＃34; DumbForm＆＃34;＆＃34; dumb-form＆＃34;失败，但＆＃34; smartform＆＃34;有效）。

无论如何，有没有人有任何想法？

Answer 1

我觉得你的两个场景，（1）$ error.required和（2）pristine和empty，可能是多余的。任何时候＃2都是真的，＃1也是如此。我认为你可以只使用＃1。

看看这个例子： http://plnkr.co/edit/PgQ3vEIOKkfA38dDWjhp?p=preview

<body ng-controller="myController as vm">
  <h1>Hello Plunker!</h1>
  <form name="wdform">
    <input type="text" name="userid" ng-model="userId" required/>
    <div ng-show="wdform.userid.$error.required">Required</div>
  </form>
</body>

但是，听起来你在localStorage上有时会在页面加载时填充你的表单，并且这不会导致$ error.required属性更改为true，但它应该。所以我认为你真正的问题就是需要调用$ scope。$ apply（）或者告诉angular再次运行验证。

Answer 2

我发现问题与验证div的放置位置有关。

如果验证div在之前放置输入字段（以便它在字段标签下面显示验证消息），我遇到了此问题中指定的错误。

将放在输入标记之后，它按预期工作（在输入字段下面显示验证消息）。

我认为这是Angular或Ionic中的一个错误。希望它将在即将发布的版本2中得到纠正。

$ error.required上的角度必需消息OR（原始值和空值）

2 个答案: