57

What is the best way of preventing hidden form fields being validated in AngularJS?

3
  • 1
    so may be just remove its required attribute when you're hiding it? Commented Oct 1, 2013 at 11:13
  • if you have code, please post it to help us, there is enough options to implement your logic, but sure not from scratch but just change your code. Fiddle/PLunker will be great Commented Oct 1, 2013 at 11:18
  • is there anyone that answer your question? many are just giving you the option to disable required validation but not any other... like, number... or am I missing something? Commented Jul 20, 2015 at 21:10

3 Answers 3

76

I initially missed the built-in ngRequired directive. There is a required tag as well, which confused me.

Now, we can use the same logic (which we used to hide the element) to set the ngRequired false.

Here is an example practical usecase: I want to ask married people the number of children they have, but, if they are not married, simply hide the field about children.

<form ng-app name="form">

    Marital status:
    <select  ng-model="maritalStatus" required>
        <option value="">Select...</option>
        <option value="M">Married</option>
        <option value="UM">Unmarried</option>
    </select>

    <div ng-show="maritalStatus == 'M'">
        Number of children: <input type="number" ng-model="children"  ng-required="maritalStatus == 'M'">
    </div>

    (for testing) Is this form correctly filled? {{form.$valid}}

</form>
4
  • 1
    It's so easy, thank you. I have a subform which was preventing the main form from being valid, because the subform (which wasn't visible) had a text-field which had the ng-required="true" directive. Now everything works as expected!
    – Sebastian
    Commented Oct 1, 2014 at 6:30
  • This will totally work; just note that ng-if creates an isolate scope...if you don't take that into account that could cause some undesired affects.
    – djdmbrwsk
    Commented Mar 27, 2015 at 0:30
  • Here a situation - First I select Married and entered the no. of children's and later select Unmarried. Now when I submit the form the children value is also getting submitted. How do I prevent submitting the value of children's ?
    – Puni
    Commented Oct 4, 2016 at 8:18
  • Got confused with the required attribute and used required="expression" instead of using ng-required="expression". Thanks @siva636 Commented Nov 2, 2016 at 11:49
46

You may also completely add or remove it from the DOM/form by using ng-if instead of ng-show.

<div ng-show="maritalStatus === 'M'">
    Number of children: <input type="number" ng-model="children"  ng-required="maritalStatus == 'M'">
</div>

to this

<div ng-if="maritalStatus === 'M'">
    Number of children: <input type="number" ng-model="children"  ng-required="true">
</div>
3
  • ng-if works well if you want to avoid validation on more than one element or when your validation is more complex than just checking if element's not empty. This is assuming you want to hide element as well.
    – Michal M.
    Commented Jan 30, 2015 at 13:02
  • 1
    so basically you are removing everything, even the user input??
    – Vignesh
    Commented May 22, 2015 at 14:32
  • The entire div and the contents in this place, but you could also use ng-if on the input as well and skip the div.
    – SoEzPz
    Commented Jul 23, 2015 at 13:56
1

You can remove required attribute by using directives:

<div ng-app="myApp">   
 <input type="backbutton" id="firstName" name="firstName" type="text"  required/>

var app = angular.module('myApp',[]);

app.directive('input',function($compile){
  return {
    restrict:'E',
    compile:function($tElement,$tAttrs){
        console.log("hi there");
      var el = $tElement[0];
      if(el.getAttribute('type')){
        el.removeAttribute('type');
        el.setAttribute($tAttrs.type,'');
        return function(scope){
          $compile(el)(scope);
        }
      }

    }  
  }
});


app.directive('remove',function($compile){
  return {
    restrict: 'A',
    replace:true,
    template:'',
      link: function (scope, element, attrs) {
          element.removeAttr('required');
      }
  }
});

See Fidlle here

Before:

<input id="firstName" name="firstName" required="" remove="" class="ng-scope">

After:

<input id="firstName" name="firstName" remove="" class="ng-scope">
3
  • The fidlle does nothing!?
    – hackp0int
    Commented Oct 1, 2013 at 12:22
  • it removes required from input. You can debug it and check that on start you have ``required`. Commented Oct 1, 2013 at 12:25
  • ahhh ok sorry haven't noticed it.
    – hackp0int
    Commented Oct 1, 2013 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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