Validation of nested forms in angularjs

Question

I have a main form and within it I have a second form declared with ng-form directive like this:

<form name="settingsForm">
  <label for="firstNameEdit">First name:</label>
  <input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />

  <ng-form name="addressForm">
   <label for="addressEdit">Address:</label>
   <input id="addressEdit" type="text" name="address" ng-  model="person.address" /><br />
   <label for="zipEdit">ZIP code:</label>
   <input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />

   <button>Save address</button>
  </ng-form>

  <button>Save</button>

</form>

When I hit submit button all inputs are validated, I wonder if I can validate only firstName for example and not the ng-form because, I want ng-form to be submitted separated on save address, not on save.

Answer 1

First of all you need to disable the default validation of the form as shown by Zohaib Ijaz. You can utilize the validation variable $invalid provided by AngularJS.

<form name="settingsForm" novalidate>
<div>
  <label for="firstNameEdit">First name:</label>
  <input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required />
  <p ng-show="validateMainForm && settingsForm.firstName.$invalid"
  class="help-block">You name is required.</p>
  <br />
</div>

<ng-form name="addressForm">
  <div>
    <label for="addressEdit">Address:</label>
    <input id="addressEdit" type="text" name="address" ng- model="person.address" />
  </div>
  <div>
    <label for="zipEdit">ZIP code:</label>
    <input id="zipEdit" type="number" name="zip" ng-model="person.zip" required />
    <p ng-show="validateAddressForm && addressForm.zip.$invalid" 
    class="help-block">Zip code is required</p>

  </div>
  <button type="submit" ng-click="submitAddressForm()">Save address</button>
  <br/>
</ng-form>

<button type="submit" ng-click="submitMainForm()">Save</button>

</form>

As you have disabled the default validation, the validation happens on click of submit button for the main form as well as the address form. On submit, a flag is set which shows the error block if the field is invalid. There is a flag validateMainForm for the settingsForm and validateAddressForm for the addressForm. When the flag is true, it shows the p element below each input field if it is invalid.

Here is the plunker that demonstrates this.

For more information, you can refer this blog- Angular Form Validation:

Answer 2

You can do something like this

https://jsbin.com/latepo/edit?html,js,output

  <form  name="settingsForm" novalidate>
      <label for="firstNameEdit">First name:</label>
      <input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />

      <ng-form name="addressForm" >
           <label for="addressEdit">Address:</label>
           <input id="addressEdit" type="text" name="address" ng-  model="person.address" /><br />
           <label for="zipEdit">ZIP code:</label>
           <input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />

           <button type="submit" ng-click="submit2()">Save address</button>
      </ng-form>

      <button type="submit" ng-click="submit1()">Save</button>

   </form>


angular.module('myapp', []).controller('MyController', MyController);
    function MyController ($scope){
           $scope.submit1 = function (){
                  alert('submit1');
           };
           $scope.submit2 = function (){
                  alert('submit2');
           };
     }