current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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.

share|improve this question
up vote 0 down vote accepted

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:

share|improve this answer
up vote -1 down vote

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');
           };
     }
share|improve this answer
    
This is not answer for the question. How you validate forms seperatly? – Dinuka Thilanga Dec 1 '16 at 4:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.