angularjs ng-show messes up form validation

Question

I have an angularjs view with the following input field that is dependent on what organization the user is from..

<div class="form-group" ng-class="{'has-error': isDirtyAndInvalid(provisionVMForm.vmHostPrefix)}">
    <label class="col-sm-2 control-label" for="vmHostPrefix">Host Prefix*</label>
    <div class="col-sm-8">
        <div ng-show="$root.sessionObj.org.name=='orgName1'>
            <input id="vmHostPrefix" name="vmHostPrefix" class="form-control" type="text" 
                 required="true"
                 ng-maxlength="12"
                 ng-minlength="12"
                 placeholder="Host Prefix"
                 ng-blur="setdirtyFromFocus(provisionVMForm.vmHostPrefix)"
                 ng-model="vmHostnamePrefix"/>
                 <div class="pull-left alert alert-danger form-validation-alert" role="alert"
                 ng-show="provisionVMForm.vmHostPrefix.$error.minlength || 
                 provisionVMForm.vmHostPrefix.$error.maxlength>
                     Host Prefix must be 12 characters long. 
                 </div>
        </div>
        <div ng-show="$root.sessionObj.org.name=='orgName2'>
            <input id="vmHostPrefix" name="vmHostPrefix" class="form-control" type="text" 
                 required="true"
                 ng-maxlength="4"
                 ng-minlength="4"
                 placeholder="Host Prefix"
                 ng-blur="setdirtyFromFocus(provisionVMForm.vmHostPrefix)"
                 ng-model="vmHostnamePrefix"/>
                 <div class="pull-left alert alert-danger form-validation-alert" role="alert"
                 ng-show="provisionVMForm.vmHostPrefix.$error.minlength || 
                 provisionVMForm.vmHostPrefix.$error.maxlength>
                     Host Prefix must be 4 characters long. 
                 </div>
        </div>
    </div>
</div>

What I need to do is identify what organization the user is currently in, and dependent the org, the hostname prefix input field can only be a certain length. Now, this works perfectly fine when I have just the first ng-show in my code. It correctly identifies the org name and the form complains if the input is less than or more than 12 characters. Whenever I add my second ng-show to identify my second organization.. my first organization form validation for org # 1 is not correct. The form only complains if the input IS 12 characters. I need it to be the opposite. Any ideas what I'm doing wrong by adding this second ng-show? I tried using ng-if when trying to identifiy the organization and that worked fine with the form validation.. but that resolves my vmHostPrefix variable to undefined in my controller. Any help is appreciated!

Answer 1

ng-show hides the element with display: none, while ng-if will remove the element from the DOM. I think what you have here is a bug caused by having 2 elements with ng-model pointing to the same variable.

Why not do this without repeating so much code and instead try using an expression in ng-minlength.

ng-minlength="$root.sessionObj.org.name==='orgName1' ? 12 : 4"

Or even better have ui state rules for the org

ng-minlength="$root.sessionObj.org.minlength"
ng-maxlength="$root.sessionObj.org.maxlength"

I believed they fixed expression evaluations for ng-min max in 1.3