how to not validate hidden field in ng-click?

Question

when user click on submit button i am validating form, using ng-click i am calling function, in this function i am passing form1.$invalid,based on this variable , i am putting condition, if condition true, validate function will call, here problem is mobile is hidden field, this hidden field also checking validation.how can skip or not validate mobile field hidden status, I tried bellow code.

html ----

 <form name="form1" novalidate>
     <input ng-show="user" type="text" name="user" ng-model="frm1.user" />
    <p ng-show="form1.user.$error.required"><span ng-show="errorMsgShow" ng-required="true">{{requiredMsg}}</span></p>
     <input ng-show="mobile" type="text"  name="mobile" ng-model="frm1.mobile" />
    <p ng-show="form1.mobile.$error.required"><span ng-show="errorMsgShow" ng-required="true">{{requiredMsg}}</span></p>
    <button ng-click="SubmitForm(regForm.$invalid);">submit</button>
 </form>

Script----

$scope.SubmitForm = function(val){

$scope.user= true;
$scope.mobile = false;
 if (if(val ===true){
            $scope.validation();
  }
}
$scope.validation = function(){
  $scope.requiredMsg="input fieldis required";
}

score 0 · Answer 1 · answered Apr 25 '17 at 05:27

0

I suggest better approach will be taking the mobile input out of the form when it's unnecessary using ng-if rather than just hide it with ng-show.

Ng-if will make sure the input is not rendered in the DOM tree when the condition is false, therefore, there will be no validation triggered.

You can do some research on differences between ng-if and ng-show to have better understanding about these two directives.

answered Apr 25 '17 at 05:27

Thai Duong Tran

2,453
12
15

how can i do that ,please help me – ramesh 1226 Apr 25 '17 at 05:30
mobile field will show only user selected particular countries like ' US, UK, India' other wise it will hide. – ramesh 1226 Apr 25 '17 at 05:32
@ramesh1226 use ng-if="mobile" and ng-if="user" in place of ng-show – Jenny Apr 25 '17 at 05:37

score 0 · Answer 2 · edited May 23 '17 at 11:47

0

Try ng-if to avoid validation.If you want mobile to skip validation then make ng-if as false using expression.

syntax: ng-if="expression"

go to this link for further info

https://docs.angularjs.org/api/ng/directive/ngIf

for difference between ng-if and ng-hide/ng-show refer the below link

what is the difference between ng-if and ng-show/ng-hide

edited May 23 '17 at 11:47

Community

1
1

answered Apr 25 '17 at 05:32

Vishnu Dhanakotti

123
9

now i understand very well but , it tried ng-if also but till it is not working – ramesh 1226 Apr 25 '17 at 05:47
add a JSFiddle so i can check from my end – Vishnu Dhanakotti Apr 26 '17 at 10:08

score 0 · Answer 3 · answered Apr 25 '17 at 06:13

Some observations :

Instead of using ng-show to hide and show the inputs just use <input type="hidden"... > element for mobile field.
No need to use variable $scope.user and $scope.mobile to hide and show the inputs.
Add the required attribute in the user input field not on mobile input field as you don't want to validate mobile field.
Use SubmitForm(form1.$invalid) instead of SubmitForm(regForm.$invalid) as your form name is form1 not regForm.

DEMO

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

myApp.controller('MyCtrl', function($scope) {
    $scope.SubmitForm = function(val) {
       console.log(val);
        if(val === true) {
            $scope.validation();
        }
    }
$scope.validation = function() {
  $scope.requiredMsg="input fieldis required";
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <form name="form1" novalidate>
     <input type="text" name="user" ng-model="frm1.user" required/>
    <p ng-show="form1.user.$error.required">{{requiredMsg}}</p>
     <input type="hidden" name="mobile" ng-model="frm1.mobile" />
    <button ng-click="SubmitForm(form1.$invalid);">submit</button>
 </form>
</div>

how to not validate hidden field in ng-click?

3 Answers3