1

是否可以基于两个条件使用 ng-show,我猜在这种情况下是 3 个条件。我知道我可能可以使用函数或指令来执行此操作,但它是在使用 ng-repeat 加载视图并将数据传播到动态生成的表单元素时。此时将条件添加到 ng-show 会更容易,因为实际输入未标记为无效,并且表单本身仍将提交为有效。当表单首次加载动态创建的表单中的最后一个元素时,会显示错误消息,就好像它是无效的一样,直到 $touched = true 并且 $veiwValue 更改。

为简单起见,我的 ng-show 如下所示:

<div class="list-help-block" ng-messages="emails_form.email.$error" ng-show="emails_form.email.$dirty || emails_form.email.$invalid">
    <div ng-messages-include="/app/views/messages.html" ></div>
</div>

这将在无效条目和提交表单时显示错误消息。但是,它还会在表单加载时显示错误消息(甚至不应该有错误)。并且只是在最后一个输入上动态添加到表单中。

我想做的是这样的:

ng-show="emails_form.email.$dirty || emails_form.email.$invalid NOT mails_form.email.$pristine"

我什至不知道这是否可能,或者一旦视图完全加载并且数据已添加到模型中,是否可以调用函数来修复验证。有什么建议么?

这是用于此的整个部分:

<div ng-repeat="emails in info.instructor.instructor_emails">
    <ng-form name="emails_form" novalidate>
        <div class="input-group">
            <span class="input-group-label">
            <span ng-show="info.instructor.instructor_emails.length==1">@</span>
            <span ng-show="info.instructor.instructor_emails.length>=2"><a ng-click="updateRemoveEmail($index)"><i class="fi-x"></i></a></span>
        </span>                                             
    <input ng-class="{ notvalid: submitted && emails_form.email.$invalid }"type="email" placeholder="jane.doe@example.com" name="email" ng-model="emails.email" ng-required="info.instructor.instructor_emails.length>=2"/>
    </div>
    <div class="list-help-block" ng-messages="emails_form.email.$error" ng-if="!emails_form.email.$pristine && (emails_form.email.$dirty || emails_form.email.$invalid)">
    <div ng-messages-include="/app/views/messages.html" ></div>
</div>

4

2 回答 2

3

作为一个建议,我建议您使用ngIf而不是ngShow作为一个好习惯。

据我了解你的NOT,它应该工作:

ng-if="!emails_form.email.$pristine && (emails_form.email.$dirty || emails_form.email.$invalid)"
于 2016-07-21T23:08:16.987 回答
0

这有效:

<div class="list-help-block" ng-messages="emails_form.email.$error" ng-if="  (!emails_form.email.$pristine && (emails_form.email.$dirty || emails_form.email.$invalid)) || (emails_form.email.$pristine && emails_form.email.$error.required) ">
    <div ng-messages-include="/app/views/messages.html" ></div>
</div>

这很丑陋,但可以满足我的需要。感谢@developer033 为我指明了正确的方向。下次我将为所有这些垃圾代码使用自定义指令

于 2016-07-22T06:48:16.783 回答