ng-show не работает для одного из похожих полей ввода

У меня многоэтапная форма. У меня есть нг-шоу, которое зависит от того, является ли вход [тип ="текст"] пустым.

Теперь он работает для одного раздела формы, но не работает для другого раздела формы.

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

Это работает для просмотра выше, но не работает для просмотра ниже

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

Я не хочу заполнять это место, так как файл CSS очень большой.

Вот плункер https://plnkr.co/edit/PEhGJ50XGjYxQcetTxNV?p=preview

Источник

3 ответа

Решение

Не проверяйте длину, а проверяйте значение 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>
Источник

Попробуйте исследовать значения, возвращаемые каждым условием в каждой ситуации.

Например, попробуйте использовать это в своей части:

<p>
DEBUG: {{ signForm.aadhar.$dirty }} && {{ newuser.pan.length === 0 }} && {{ signForm.pan.$dirty }} && {{ newuser.aadhar.length === 0 }}
</p>
Источник

Ошибка в выражении ng-hide. Вы должны использовать ng-show, также инвертируя элементы управления длиной:

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

Он контролирует, если оба входа были изменены, и в них есть какое-то значение. Если условие выполнено, появляется кнопка "Отправить", в противном случае она скрыта.

Источник
Другие вопросы по тегам