I have two forms on the same page that need validation. The thing is one of the forms is being databound so that I can check if it is valid using $invalid. But the other form seems like it is not getting bound and cannot call any of the methods on it ($dirty, $invalid, etc.)
Please see here below
replace
<div class="error" data-ng-show="checkoutBillingForm.txtBillingAddress1.$dirty && checkoutBillingForm.txtBillingAddress1.$invalid">
with
<div class="error" data-ng-show="checkoutBillingForm.txtBillingAddress1.$dirty || checkoutBillingForm.txtBillingAddress1.$invalid">
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<form name="checkoutShippingForm" role="form" novalidate="">
<div class="row">
<div class="col-md-4">
<label for="txtAddress1">Address 1:</label>
</div>
<div class="col-md-8">
<input type="text" name="txtAddress1" data-ng-model="vm.Shipping.Address.AddressLine1" required="" />
<div class="error" data-ng-show="checkoutShippingForm.txtAddress1.$dirty && checkoutShippingForm.txtAddress1.$invalid">
<small class="error" data-ng-show="checkoutShippingForm.txtAddress1.$error.required">An Address is required.</small>
</div>
</div>
</div>
Invalid? {{checkoutShippingForm.$invalid}}
<!--Doesn't show -->
</form>
<form name="checkoutBillingForm" role="form" novalidate="">
<div class="row">
<div class="col-md-4">
<label for="txtBillingAddress1">Billing Address 1:</label>
</div>
<div class="col-md-8">
<input type="text" id="txtBillingAddress1" name="txtBillingAddress1" data-ng-model="vm.Billing.Address.AddressLine1" required="" />
<div class="error" data-ng-show="checkoutBillingForm.txtBillingAddress1.$dirty || checkoutBillingForm.txtBillingAddress1.$invalid">
<small class="error" data-ng-show="checkoutBillingForm.txtBillingAddress1.$error.required">An Address is required.</small>
</div>
</div>
</div>
</form>
</div>
No comments:
Post a Comment