ng-show is not working for one of the similar input fields

Question

I have a multistep form. I have ng-show which depends whether or not the input[type="text"] is empty.

Now, it works for one section of the form, but doesn't work for another section of the form.

<div id="wrapper-signup">
  <h1>Borrower Signup</h1>
  <p>Register and start borrowing money online.</p>

  <div class="element-wrap">
    <label>NAME<br>
      <div class="name-wrap">
        <input type="text" ng-model="newuser.firstname" name="firstname" id="firstname" value="" placeholder="First Name">
        <input type="text" ng-model="newuser.lastname" name="lastname" id="lastname" value="" placeholder="Last Name">
      </div>
      <p class="error" style="width: 45%; color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.firstname.$dirty && newuser.firstname.length ===  0">Firstname required</p>
      <p class="error" style="width: 45%; color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.lastname.$dirty && newuser.lastname.length ===  0">Lastname required</p>
    </label><br>
  </div>
  <div class="element-wrap">
      <label for="email">EMAIL
        <div class="email-num-wrap">
          <span class="awesome-icon"><i class="fa fa-envelope-o fa-lg email-icon" aria-hidden="true"></i></span><input type="email" id="email" ng-model="newuser.email" name="email" value="" placeholder="Email ID" required>
        </div>
        <p class="error" style="color: red; font-size: 0.9em;" ng-show="signForm.email.$invalid && signForm.email.$dirty">Enter a valid email</p>
      </label>
  </div>
  <div class="element-wrap">
    <label>MOBILE NUMBER
      <div class="email-num-wrap">
        <span class="awesome-icon"><i class="fa fa-mobile fa-lg mobile-icon" aria-hidden="true"></i></span><input type="number" id="number" ng-model="newuser.number" name="mobile" ng-minlength="10" ng-maxlength ="10" value="" placeholder="Enter 10 digit number" required>
      </div>
      <p class="error" style="color: red; font-size: 1em;" ng-show="signForm.mobile.$dirty && (signForm.mobile.$error.minlength || singForm.mobile.$error.maxlength)">Please enter a 10 digit number</p>
    </label>
  </div>
  <div class="clear">
    &nbsp;
  </div>
  <div class="checkbox-wrap">
  <input type="checkbox" class="checkbox" name="terms" value="" ng-model="tcheck" required><p class="checkbox-text">I have read and agree to the <a href="#">Privacy Policy</a>, <a href="#">Terms of Use</a> and consent to Electronic Disclosures.</p>
  </div>
  <div class="checkbox-wrap">
    <input type="checkbox" class="checkbox" name="condiiton" value="" ng-model="ccheck" required><p class="checkbox-text">I authorize RupaiyaExchange to share my details with other Financial Institutions for credit card check and faster processing of loan.</p>
  </div>
  <a ui-sref='index.otp' ng-show="signForm.email.$valid && tcheck && ccheck && signForm.mobile.$valid && newuser.firstname.length !== 0 && newuser.lastname.length !==  0 " class="submit-signup">SIGNUP</a>

</div>

It works for above view, but doesn't work for below view

<div id="wrapper-identity">
    <p>Please enter the following details</p>
    <div class="aadhar-wrap">
        <label for="aadhar">Aadhar Card</label><br>
        <input type="text" name="aadhar" ng-model="newuser.aadhar" id="aadharN" value="" placeholder="Enter Aadhar Card No" required>
        <p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.aadhar.$dirty && newuser.aadhar.length === 0">Aadhar number required</p>
    </div>
    <div class="pan-wrap">
        <label for="pan">PAN</label><br>
        <input type="text" name="pan" ng-model="newuser.pan" value="" id="panN" placeholder="Enter PAN No" required>
        <p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.pan.$dirty && newuser.pan.length === 0">PAN number required</p>
    </div>
    <input type="submit" ng-hide="signForm.aadhar.$dirty && newuser.pan.length === 0 && signForm.pan.$dirty && newuser.aadhar.length === 0" ng-click="go('/index/done')" name="submit-info" value="Submit" id="submit">
</div>

I don't want to populate this place, since the css file is very large.

Here's the plunker https://plnkr.co/edit/PEhGJ50XGjYxQcetTxNV?p=preview

Answer 1

Do not check for length rather check for the value newuser.pan

<p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.aadhar.$dirty && !newuser.aadhar">Aadhar number required</p>

<p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.pan.$dirty && !newuser.pan">PAN number required</p>

Answer 2

Try to investigate the values returned by each condition in each situation.

For example, try to use this in your partial:

<p>
DEBUG: {{ signForm.aadhar.$dirty }} && {{ newuser.pan.length === 0 }} && {{ signForm.pan.$dirty }} && {{ newuser.aadhar.length === 0 }}
</p>

Answer 3

The mistake is in the ng-hide expression. You should use ng-show, also inverting the length controls:

 <input type="submit" ng-show="signForm.aadhar.$dirty && newuser.pan.length != 0 && signForm.pan.$dirty && newuser.aadhar.length != 0" ng-click="go('/index/done')" name="submit-info" value="Submit" id="submit">

It controls if both of the inputs have been changed an there is some value in them. If the condition holds, Submit button appears, otherwise it's hidden.