javascriptangularjsangularjs-ng-form

Using ng-show in Angular with an OR and NOT condition

Is it possible to use ng-show based on two conditions, well I guess in this case 3 conditions. I know i can probably do this with a function or directive but it is when loading the view and propagating data into dynamically generated form elements using ng-repeat. It would just be easier at this point to add the condition to the ng-show as the actual input is not marked invalid and the form itself will still submit as valid. When the form first loads the last element in the dynamically created form displays the error message as if it is invalid until $touched = true and the $veiwValue changes.

To keep it simple, my ng-show looks like this:

<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>

This displays the error messages fine on an invalid entry and on error when form is submitted. However it also displays the error message (which there shouldn't even be an error) when the form loads. And just on the last input dynamically added to the form.

What I would like to do is something like this:

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

I don't even know if that's possible or if it may be possible to call a function to fix the validation once the view is fully loaded and the data has been added to the model. Any suggestions?

Here's the whole section that is used for this:

<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>

Solution

  • This works:

    <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>

    It's ugly but does what I need it to do. Thanks @developer033 for pointing me in the right direction. Next time I'll use a custom directive for all this junky code