ng-required不适用于禁用状态的已启用字段

时间:2017-05-08 10:50:45

标签: angularjs validation

对于禁用/启用复选框检查的字段的Angular验证,我遇到了问题。

失败的情况如下所示:

结帐页面包含地址字段和默认选中的复选框,表示送货地址和帐单邮寄地址相同。如果未选中,则必须提供帐单邮寄地址。我有一个按钮,如果字段填充了正确的数据,将显示付款选项。 只要选中复选框,验证就可以正常工作。但如果取消选中该复选框,则无法验证帐单邮寄地址字段。

我做了什么:

如果选中该复选框,我已禁用并隐藏了帐单邮寄地址字段。取消选中后,我将显示帐单地址字段,其中所有字段均处于启用和必需状态。 背后的原因是,如果我不禁用字段,则会在字段验证中考虑隐藏的帐单邮寄地址字段。

带有Angular验证的视图页面:

<form class="form-horizontal address" name="addressForm" novalidate>
                <div class="panel-body">
                    <div class="form-group">
                        <div class="col-md-12">
                            <h4>Shipping Address</h4>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.country.$invalid && !addressForm.country.$pristine }">
                        <div class="col-md-12"><strong>Country:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="country" class="form-control" value="" ng-model="shipCountry" ng-required="true" />
                            <p ng-show="addressForm.country.$invalid && !addressForm.country.$pristine" class="help-block">Country name is required.</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.fname.$invalid && !addressForm.fname.$pristine }">
                        <div class="col-md-12"><strong>Full Name:</strong></div>
                        <div class="col-xs-12">
                            <input type="text" name="fname" class="form-control" value="" ng-model="shipFullName" ng-required="true" />
                            <p ng-show="addressForm.fname.$invalid && !addressForm.fname.$pristine" class="help-block">Your name is required.</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.address.$invalid && !addressForm.address.$pristine }">
                        <div class="col-md-12"><strong>Address:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="address" class="form-control" value="" ng-model="shipAddress" ng-required="true" />
                            <p ng-show="addressForm.address.$invalid && !addressForm.address.$pristine" class="help-block">Your address is required.</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.city.$invalid && !addressForm.city.$pristine }">
                        <div class="col-md-12"><strong>City:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="city" class="form-control" value="" ng-model="shipCity" ng-required="true" />
                            <p ng-show="addressForm.city.$invalid && !addressForm.city.$pristine" class="help-block">Your city is required.</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.state.$invalid && !addressForm.state.$pristine }">
                        <div class="col-md-12"><strong>State:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="state" class="form-control" value="" ng-model="shipState" ng-required="true" />
                            <p ng-show="addressForm.state.$invalid && !addressForm.state.$pristine" class="help-block">Your state is required.</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.zip_code.$invalid && !addressForm.zip_code.$pristine }">
                        <div class="col-md-12"><strong>Zip / Postal Code:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="zip_code" class="form-control" value="" ng-model="shipPostal" ng-required="true" ng-pattern="/^[0-9]+$/" maxlength="7" />
                            <p ng-show="addressForm.zip_code.$invalid && !addressForm.zip_code.$pristine" class="help-block">Error in postal code field!!</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.phone_number.$invalid && !addressForm.phone_number.$pristine }">
                        <div class="col-md-12"><strong>Phone Number:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="phone_number" class="form-control" value="" ng-model="shipPhone" ng-required="true" maxlength="10"
                                ng-pattern="/^[0-9]+$/" />
                            <p ng-show="addressForm.phone_number.$invalid && !addressForm.phone_number.$pristine" class="help-block">Error in phone number field!!</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.email_address.$invalid && !addressForm.email_address.$pristine }">
                        <div class="col-md-12"><strong>Email Address:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="email_address" class="form-control" value="" ng-model="shipEmail" ng-required="true" ng-pattern="/^(([^<>()\[\]\\.,;:\s@']+(\.[^<>()\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/" />
                            <p ng-show="addressForm.email_address.$invalid && !addressForm.email_address.$pristine" class="help-block">Error in email field!!</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="checkbox" name="address" class="" value="" /> Save address
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="checkbox" name="address" class="" value="" ng-model="billSameAsShip" ng-change="toggleBillAddressView()" />Billing Address same as Shipping Address
                        </div>
                    </div>
                </div>
                <!--SHIPPING METHOD END-->
                <!--BILLING METHOD START-->
                <div class="panel-body" ng-hide="billSameAsShip">
                    <div class="form-group">
                        <div class="col-md-12">
                            <h4>Billing Address</h4>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.bill_country.$invalid && !addressForm.bill_country.$pristine }">
                        <div class="col-md-12"><strong>Country:</strong></div>
                        <div class="col-md-12">
                            <input type="text" class="form-control" name="bill_country" value="" ng-model="billCountry" ng-disabled="billSameAsShip" ng-required="{{!billSameAsShip}}" />
                            <p ng-show="addressForm.bill_country.$invalid && !addressForm.bill_country.$pristine" class="help-block">Your billing country is required.</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.bill_fname.$invalid && !addressForm.bill_fname.$pristine }">
                        <div class="col-xs-12">
                            <strong>Full Name:</strong>
                            <input type="text" name="bill_fname" class="form-control" value="" ng-model="billFullName" ng-disabled="billSameAsShip" ng-required="{{!billSameAsShip}}" />
                            <p ng-show="addressForm.bill_fname.$invalid && !addressForm.bill_fname.$pristine" class="help-block">Your full name is required.</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.bill_address.$invalid && !addressForm.bill_address.$pristine }">
                        <div class="col-md-12"><strong>Address:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="bill_address" class="form-control" value="" ng-model="billAddress" ng-disabled="billSameAsShip" ng-required="{{!billSameAsShip}}" />
                            <p ng-show="addressForm.bill_address.$invalid && !addressForm.bill_address.$pristine" class="help-block">Your billing address is required.</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.bill_city.$invalid && !addressForm.bill_city.$pristine }">
                        <div class="col-md-12"><strong>City:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="bill_city" class="form-control" value="" ng-model="billCity" ng-disabled="billSameAsShip" ng-required="{{!billSameAsShip}}" />
                            <p ng-show="addressForm.bill_city.$invalid && !addressForm.bill_city.$pristine" class="help-block">Your billing city is required.</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.bill_state.$invalid && !addressForm.bill_state.$pristine }">
                        <div class="col-md-12"><strong>State:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="bill_state" class="form-control" value="" ng-model="billState" ng-disabled="billSameAsShip" ng-required="{{!billSameAsShip}}" />
                            <p ng-show="addressForm.bill_state.$invalid && !addressForm.bill_state.$pristine" class="help-block">Your billing state is required.</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.bill_zip_code.$invalid && !addressForm.bill_zip_code.$pristine }">
                        <div class="col-md-12"><strong>Zip / Postal Code:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="bill_zip_code" class="form-control" value="" ng-model="billPostal" ng-disabled="billSameAsShip" ng-required="{{!billSameAsShip}}" />
                            <p ng-show="addressForm.bill_zip_code.$invalid && !addressForm.bill_zip_code.$pristine" class="help-block">Your billing zip/postal code is required.</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.bill_phone_number.$invalid && !addressForm.bill_phone_number.$pristine }">
                        <div class="col-md-12"><strong>Phone Number:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="bill_phone_number" class="form-control" value="" ng-model="billPhone" ng-disabled="billSameAsShip" ng-required="{{!billSameAsShip}}" />
                            <p ng-show="addressForm.bill_phone_number.$invalid && !addressForm.bill_phone_number.$pristine" class="help-block">Your billing phone number is required.</p>
                        </div>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error' : addressForm.bill_email_address.$invalid && !addressForm.bill_email_address.$pristine }">
                        <div class="col-md-12"><strong>Email Address:</strong></div>
                        <div class="col-md-12">
                            <input type="text" name="bill_email_address" class="form-control" value="" ng-model="billEmail" ng-disabled="billSameAsShip" ng-required="{{!billSameAsShip}}" />
                            <p ng-show="addressForm.bill_email_address.$invalid && !addressForm.bill_email_address.$pristine" class="help-block">Your billing email address is required.</p>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="form-group">
                        <div class="col-xs-12 text-right">
                            <button type="button" class="btn btn-primary btn-submit-fix" ng-click="gotoInvoice()">Show Payment Option</button>
                        </div>
                    </div>
                </div>
            </form>

0 个答案:

没有答案
相关问题