What is the best way of preventing hidden form fields being validated in AngularJS?
3 Answers
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>
-
1It'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! 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. 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 ?– PuniCommented 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
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>
-
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. Commented Jan 30, 2015 at 13:02
-
1so basically you are removing everything, even the user input??– VigneshCommented 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.– SoEzPzCommented Jul 23, 2015 at 13:56
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">
-
-
it removes
required
frominput
. You can debug it and check that on start you have ``required`. Commented Oct 1, 2013 at 12:25 -
required
attribute when you're hiding it?