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

Question

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

<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 中创建元素)。