不要验证 ng-hide 下的表单元素

Question

在下面的代码中，我将根据所选座位的数量逐个显示输入乘客详细信息部分。 我使用ng-show根据座位选择显示输入乘客详细信息部分。 如果选择 2 个座位，将显示用于输入 2 个乘客详细信息的两个部分，在这种情况下，我只想验证 2 个乘客详细信息。如果选择3个座位，将显示3个用于输入乘客详细信息的部分。即使一个部分在ng-hide angle下，也会验证该细节。如何摆脱这个。

<form novalidate name="passengerDetails">
<div class="col-xs-12 col-md-4">
<div class="panel panel-default ticket-panel">
<div class="panel-heading">
<h3 class="panel-title">Contact Details</h3>
</div>
<div class="panel-body">
<div class="passenger-detail">
<label for="name">
E-Mail
<input type="email" ng-model="contactEmail" name="contactEmail" ng-required='true' required>
</label> <span style="color: red" ng-show="passengerDetails.contactEmail.$touched && passengerDetails.contactEmail.$invalid">Enter email address</span>
<br>
<label for="name">
Phone Number
<input type="number" ng-model="contactNumber" name="contactNumber" ng-required="true" required>
</label> <span style="color: red" ng-show="passengerDetails.contactNumber.$touched && passengerDetails.contactNumber.$invalid ">Enter Phone Number</span>
</div>
</div>
<div class="panel-heading" ng-show="seatSelected.length>0 && seatSelected.length<=6 ">
<h3 class="panel-title">Details of 1st Passenger</h3>
</div>
<div class="panel-body" ng-show="seatSelected.length>0 && seatSelected.length<=6 ">
<div class="passenger-detail">
<label for="name1">
Name
<input type="text" id="name1" ng-model="passengerOneName" name="passengerOneName" ng-required="true" required>
</label> <span style="color: red" ng-show="passengerDetails.passengerOneName.$touched && passengerDetails.passengerOneName.$invalid"> Enter Name</span>
<br>
<label for="age1">
Age
<input type="number" id="age1" name="passengerOneAge" ng-model="passengerOneAge" ng-required="true">
</label><span style="color: red" ng-show="passengerDetails.passengerOneAge.$touched && passengerDetails.passengerOneAge.$invalid">Enter Age</span>
</div>
</div>
<div class="panel-heading" ng-show="seatSelected.length>1 && seatSelected.length<=6">
<h3 class="panel-title">Details of 2nd Passenger</h3>
</div>
<div class="panel-body" ng-show="seatSelected.length>1 && seatSelected.length<=6">
<div class="passenger-detail">
<label for="name2">
Name
<input type="text" ng-model="passengerTwoName" name="passengerTwoName" id="name2" ng-required="true" true>
</label><span style="color: red" ng-show="passengerDetails.passengerTwoName.$touched && passengerDetails.passengerTwoName.$invalid"> Enter Name</span>
<br>
<label for="age2">
Age
<input type="number" id="age2" ng-model="passengerTwoAge" name="passengerTwoAge" ng-required="true" true>
</label><span style="color: red" ng-show="passengerDetails.passengerTwoAge.$touched && passengerDetails.passengerTwoAge.$invalid">Enter Age</span>
<br>
</div>
</div>
<div class="panel-heading" ng-show="seatSelected.length>2 && seatSelected.length<=6">
<h3 class="panel-title">Details of 3rd Passenger</h3>
</div>
<div class="panel-body" ng-show="seatSelected.length>2 && seatSelected.length<=6">
<div class="passenger-detail">
<label for="name3">
Name
<input type="text" id="name3" ng-model="passengerThreeName" name="passengerThreeName" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerThreeName.$touched && passengerDetails.passengerThreeName.$invalid"> Enter Name</span>
<br>
<label for="age3">
Age
<input type="number" id="age3" ng-model="passengerThreeAge" name="passengerThreeAge" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerThreeAge.$touched && passengerDetails.passengerThreeAge.$invalid">Enter Age</span>
</div>
</div>
<div class="panel-heading" ng-show="seatSelected.length>3 && seatSelected.length<=6">
<h3 class="panel-title">Details of 4th Passenger</h3>
</div>
<div class="panel-body" ng-show="seatSelected.length>3 && seatSelected.length<=6">
<div class="passenger-detail">
<label for="name4">
Name
<input type="text" id="name4" ng-model="passengerFourName" name="passengerFourName" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerFourName.$touched && passengerDetails.passengerFourName.$invalid"> Enter Name</span>
<br>
<label for="age4">
Age
<input type="number" id="age4" ng-model="passengerFourAge" name="passengerFourAge" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerFourAge.$touched && passengerDetails.passengerFourAge.$invalid"> Enter Name</span>
</div>
</div>
<div class="panel-heading" ng-show="seatSelected.length>4 && seatSelected.length<=6">
<h3 class="panel-title">Details of 5th Passenger</h3>
</div>
<div class="panel-body" ng-show="seatSelected.length>4 && seatSelected.length<=6">
<div class="passenger-detail">
<label for="name5">
Name
<input type="text" id="name5" ng-model="passengerFiveName" name="passengerFiveName" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerFiveName.$touched && passengerDetails.passengerFiveName.$invalid"> Enter Name</span>
<br>
<label for="age5">
Age
<input type="number" id="age5" ng-model="passengerFiveAge" name="passengerFiveAge" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerFiveAge.$touched && passengerDetails.passengerFiveAge.$invalid"> Enter Name</span>
</div>
</div>
<div class="panel-heading" ng-show="seatSelected.length>5 && seatSelected.length<=6">
<h3 class="panel-title">Details of 6th Passenger</h3>
</div>
<div class="panel-body" ng-show="seatSelected.length>5 && seatSelected.length<=6">
<div class="passenger-detail">
<label for="name6">
Name
<input type="text" id="name6" ng-model="passengerSixName" name="passengerSixName" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerSixName.$touched && passengerDetails.passengerSixName.$invalid"> Enter Name</span>
<br>
<label for="age6">
Age
<input type="number" id="age6" ng-model="passengerSixAge" name="passengerSixAge" ng-required="true" required>
</label><span style="color: red" ng-show="passengerDetails.passengerSixAge.$touched && passengerDetails.passengerSixAge.$invalid"> Enter Name</span>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="panel panel-default ticket-panel">
<div class="panel-heading">
<h3 class="panel-title">Your Ticket Details</h3>
</div>
<div class="panel-body">
<div class="detail-group">
<p>Price of a ticket: Rs.{{ticketPrice}}</p>
<p>Bus Timings: 2pm - 5pm</p>
<p>Total Tickets Selected: <b>{{result.length}}</b>
</p>
</div>
</div>
<div class="panel-footer">
<p>Total fare is: Rs. <b>{{result.length * ticketPrice}}</b>
</p>
<button type="submit">Continue to payment</button>
</div>
</div>
</div>

Answer 1

当您使用 ng-show/ng-hide 时，元素处于活动状态，但被 CSS 隐藏。尝试使用ng-if，它操作 DOM(从 DOM 中删除元素并在 DOM 中创建元素(。

Answer 2

如上所述，如果您不想显示最佳效果，请使用ng-if。 仍然在CSS的帮助下覆盖.ng-leave和.ng-enter来覆盖ng-valid和ng-invalid css。

但最好的仍然是 ng-if. :)