CODEWITHSUNDEEP
formsangularjs
totothegreat
totothegreat

Reputation: 1643

Angularjs check if section in the form is valid

I want to check my angular form validity with a little tweak,

I have a form builded dynamically with directives involved, Now the form has more than one page to it, so i play with ng-hide/ng-show when i move from page to page...

All i want to do is to check the validity of the first chunk of form inputs, for example:

I have 3 pages, 3 questions in every 'page', before the user can go to the next page, it should check for validation on the three inputs, and only than! he can move to the next one...

on my form tag i have 'novalidate' so i must do all the validations myself...

Upvotes: 2

Views: 3514

Answers (3)

MikeS
MikeS

Reputation: 707

What you're after is ng-form

You can't nest HTML <form></form> tags but you can with ng-form to split your form into sections.

i.e.

 <form name="myForm">

   <ng-form name="subForm1">
      <input name="txtField1" type="text" ng-model="Field1" ng-maxlength="50" required>
   </ng-form>

   <ng-form name="subForm2">
      <input name="txtField2" type="text" ng-model="Field2" ng-maxlength="10" required>
   </ng-form>

   <button type="button1" ng-disabled="subForm1.$invalid" ng-click="doSomething() ">Button 1</button>
   <button type="button1" ng-disabled="subForm2.$invalid" ng-click="doSomething()" >Button 2</button>
   <button type="button3" ng-disabled="myForm.$invalid" ng-click="doSomething()" >Button 3</button>

 </form>

In this instance button1 and button2 are disabled on parts of the form where as button3 is disabled based on the whole forms input

Source: https://docs.angularjs.org/api/ng/directive/ngForm

Upvotes: 4

Paullo
Paullo

Reputation: 2127

Angular JS has some pretty features which you can take advantage of especially the class .ng-valid and .ng-invalid. As the user fills your form, angular dose a real time update on the state of form fields by changing the classList to correspond to the current state of the form.

Any for field that is has been altered and does not pass the Angular validation will have a class .ng-invalid well all classes that passed the validation will have .ng-valid. While ng-pristine indicates that the form have not been modified ng-dirty tells you that the form has been modified. Not that ng-pristine and ng-dirty cannot be used to ascertain the validity of the field.

Meanwhile for your case I have created a CodePen 

angular.module("paged", [])
.controller("FormCtrl", function($scope) {
  $scope.form = {page: 1};
  $scope.canShow = function(i) {
    return (i === $scope.form.page);
  };

  $scope.submit = function(form) {
    alert("Form Submitted", form);
  };

  $scope.gotoPage = function(pageTo) {
    var show = false;

    var els = document.getElementsByTagName("input"); //Just with input only to keep it simple

    for (var i = 0; i < els.length; i++) {
      if (els[i].hasAttribute("data-page") && els[i].getAttribute("data-page") == pageTo - 1) {
        if (els[i].classList.contains("ng-invalid")) {
          show = false;
          break;
        }
      }
      show = true;
    }

    if (show) {
      $scope.form.page = pageTo;
      if (pageTo == 4) {
        $scope.submit($scope.form);
      }
    }
  }


});

to show you how this can done. As someone will rightfully say, there may ways to kill a rat. I think this is one of them

Upvotes: 0

Michel Tom&#233;
Michel Tom&#233;

Reputation: 389

You can use the Angular's form element property $dirty, or you could check if the element you want to validate has the class ng-dirty.

If you'd like, read more here, it explains how to use and check this.

Upvotes: 0

Related Questions