AngularJS validation of two forms on same page

Question

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.)

Here's a snippet of my html page:

<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>
                    invalid: {{checkoutBillingForm.$invalid}}  <!--Shows true -->
</form>

Looks fine here.. plnkr.co/edit/2G0SRd?p=preview

PSL
– PSL

2014-10-09 20:25:25 +00:00
Commented Oct 9, 2014 at 20:25 — PSL
– PSL, Commented Oct 9, 2014 at 20:25

sylwester · Accepted Answer · 2014-10-09 21:03:11Z

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>

Mahib · Accepted Answer · 2017-10-03 18:13:15Z

You can use ng-form multiple times in a single page.

HTML:

<ng-form name="scope.form">
            <div>
                <table>
                    <tbody>
                        <tr>
                            <td class="col-md-3">
                                <div class="label-color">HEADER NAME <span class="red"><strong>*</strong></span></div>
                            </td>
                            <td class="col-md-9">
                                <input type="text" name="headerName" id="headerName" ng-change="scope.checkHeaderName(header.headerName)"
                                    ng-model="header.headerName" maxlength="50" class="form-control" required>
                                <div ng-show="scope.form.$submitted || scope.form.headerName.$touched">
                                    <span ng-show="scope.form.headerName.$error.required" class="label-color validation-message">Header Name is required</span>                                        
                                </div>
                            </td>
                        </tr>                            
                        <tr>
                            <td class="col-md-3">
                                <div class="label-color">HEADER DESCRIPTION <span class="red"><strong>*</strong></span></div>
                            </td>
                            <td class="col-md-9">
                                <textarea name="headerDesc" id="headerDesc" ng-model="header.headerDesc" class="form-control" maxlength="50" required rows="3" cols="15"></textarea>
                                <div ng-show="scope.form.$submitted || scope.form.headerDesc.$touched">
                                    <span ng-show="scope.form.headerDesc.$error.required" class="label-color validation-message">Header description is required</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>                    
            </div>
        <button ng-click="scope.changePage(2)" type="button" class="btn btn-default pull-right">Next</button>
        </ng-form>


        <ng-form name="scope.supervisionform">               
            <div class="supervision-search-block">                                                
                <div class="input-group">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="form-group">
                            <div class="label-color">CERTIFICATE NUMBER (LAST 6 DIGITS) <span class="red"><strong>*</strong></span></div>
                            <input type="text" maxlength="6" pattern="[0-9]{6}" name="licenseNumber" id="licenseNumber" class="form-control" ng-model="scope.licenseNumber" required />
                            <span ng-show="(scope.supervisionform.licenseNumber.$dirty && scope.supervisionform.licenseNumber.$error.required)" class="help-block">License Number is required</span>
                            <span ng-show="scope.supervisionform.licenseNumber.$dirty && scope.supervisionform.licenseNumber.$error.pattern" class="help-block">Please provide only 6 digits</span>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="form-group">
                            <div class="label-color">LAST NAME <span class="red"><strong>*</strong></span></div>
                            <input type="text" maxlength="20" name="lastName" id="lastName" class="form-control" ng-model="scope.lastName" required/>
                            <span ng-show="scope.supervisionform.lastName.$dirty && scope.supervisionform.lastName.$error.required" class="help-block">Last Name is required</span>
                        </div>
                    </div>
                    <span class="input-group-btn">                                
                        <button type="button"                                             
                            ng-click="scope.validateSupervisionCertificate()" 
                            class="btn btn-primary">Search
                        </button>                            
                    </span>
                </div>                                        
            </div>
            <div>                    
                <button ng-click="scope.submitPlantReg();" type="button" class="btn btn-default pull-right">Submit</button>
            </div>
        </ng-form>

In Controller:

changePage(pageNumber) {
    let self = this;

    if (self.form && self.form.headerName.$invalid) {
        self.form.premise.$setDirty();
        self.form.premise.$setTouched();
        return;
    }

    if (pageNumber == 2) {
        Do something..
    }        
}

submitPlantReg() {
    let self = this;

    // Supervision verification form validation
    if (scope.supervisionForm.supervisionType.$invalid || scope.supervisionForm.licenseNumber.$invalid || scope.supervisionForm.lastName.$invalid ||
        scope.supervisionForm.contractorName.$invalid || scope.supervisionForm.contractorClass.$invalid) {
        scope.supervisionForm.$setDirty();
        scope.supervisionForm.licenseNumber.$setDirty();
        scope.supervisionForm.lastName.$setDirty();
        scope.supervisionForm.contractorName.$setDirty();
        scope.supervisionForm.contractorClass.$setDirty();
        scope.supervisionForm.$setSubmitted();
        return;
    }

    Do something else...
}

Collectives™ on Stack Overflow

AngularJS validation of two forms on same page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related