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>
4 Comments
Sebastian
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!
djdmbrwsk
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.
Puni
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 ?
hatsrumandcode
Got confused with the required attribute and used required="expression" instead of using ng-required="expression". Thanks @siva636
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 Comments
Michal M.
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.
Vignesh
so basically you are removing everything, even the user input??
SoEzPz
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.
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 Comments
hackp0int
The fidlle does nothing!?
Maxim Shoustin
it removes
required from input. You can debug it and check that on start you have ``required`.hackp0int
ahhh ok sorry haven't noticed it.
requiredattribute when you're hiding it?