ng-show不適用於其中一個類似的輸入字段

我有一個多步表單。我有ng-show，它取決於輸入[type =「text」]是否爲空。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文件是非常大的。

這裏的plunker https://plnkr.co/edit/PEhGJ50XGjYxQcetTxNV?p=preview

來源

2017-01-06 relentless-coder

運行你plnkr，我看到了aadhar卡/ PAM形式。 – RamblinRose

不檢查長度，而檢查的價值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>

來源

2017-01-06 15:40:18

嘿，謝謝。這工作，但爲什麼檢查長度時它沒有工作。因爲它適用於signup.html中的Firstname和Lastname –

嘗試通過調查在每種情況下每個條件返回的值。

例如，嘗試在局部使用此：

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

來源

2017-01-06 15:29:37

嘿，我正在檢查值，發生了一件有趣的事情。長度的布爾值最初爲false，當用戶開始輸入時，它變爲true，但是當用戶清除該字段時，它仍然是true。你能解釋爲什麼嗎？ –

是的，我認爲這個問題與該領域最初具有未定義內容的事實有關。當用戶開始鍵入並稍後清除該字段時，它將變成一個空字符串。 –

但我已經使用''==='''和空字符串應該產生錯誤 –

錯誤是在NG隱藏表達。你應該使用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">

它控制着兩個輸入是否已經改變，並且它們中有一些值。如果條件成立，則提交按鈕將出現，否則將隱藏。

來源

2017-01-06 15:34:40

ng-show不適用於其中一個類似的輸入字段

回答

相關問題