Monday 30 March 2015

AngularJS validation of two forms on same page

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