Angular JS Form validation inside tabset give error : TypeError: Cannot read property '$valid' of undefined

Question

Html :

<tabset> 
    <tab heading="Create CS Sales Order & GRN-VRRE" >
        <form name="motorForm"  novalidate>
            <input type="text" ng-model="ngtext" required />
            <button type="submit" ng-click="CSsalesVRRESave()" >submit</button>
        </form>
    </tab>
    <tab heading="Create CS Sales Order & GRN-VRRE" >
        <div>somthing inside it</div>
    </tab>
</tabset>

Javascript function

$scope.CSsalesVRRESave = function () {
            console.log($scope.motorForm.$valid);
        }

output console gives me error TypeError:

Cannot read property '$valid' of undefined :

Note : if I remove tabset it works as per requirement

Nelson · Accepted Answer · 2016-01-07 05:54:59Z

4

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

app.controller('testController', ['$scope', '$location', function ($scope, $location) {

$scope.CSsalesVRRESave = function (motorForm) {
     if(motorForm.$valid==true){
  
  alert($scope.ngtext)
  } else{
    alert("Please Enter some value");
    }
};
  
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp"  ng-controller="testController">
<tabset> 
    <tab heading="Create CS Sales Order & GRN-VRRE">
        <form name="motorForm"  novalidate>
            <input type="text" ng-model="ngtext" ng-required="true"/>
            <button type="submit" ng-click="CSsalesVRRESave(motorForm)">submit</button>
        </form>
    </tab>
    <tab heading="Create CS Sales Order & GRN-VRRE">
        <div>somthing inside it</div>
    </tab>
</tabset>
  </body>

<tabset> 
    <tab heading="Create CS Sales Order & GRN-VRRE">
        <form name="motorForm"  novalidate>
            <input type="text" ng-model="ngtext" required/>
            <button type="submit" ng-click="CSsalesVRRESave(motorForm)">submit</button>
        </form>
    </tab>
    <tab heading="Create CS Sales Order & GRN-VRRE">
        <div>somthing inside it</div>
    </tab>
</tabset>


$scope.CSsalesVRRESave = function (motorForm) {
    console.log(motorForm.$valid);
};

edited Jan 7, 2016 at 5:54

answered Jan 7, 2016 at 5:36

Nelson

3834 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KIRANJOSHI Over a year ago

error is gone but i am not able to get the value of ngtext in controller. console.log($scope.ngtext); gives me undefined

Nelson Over a year ago

i m updated the code, check now , if its working please tick and accept my answer

Rudra · Accepted Answer · 2016-01-07 06:22:56Z

2

I don't have enough karma to comment, and Nelson's answer works, but the reason you were seeing the problem in the first place is that tabsets create a new child $scope, so motorForm is part of that tab's $scope. The ng-click goes to the function in the parent $scope, which doesn't have that form.

Another way around this is to have your forms be values of an overall forms object on the parent $scope, that way they will be accessed by reference and it will do what you'd expect. Like - in your controller have $scope.forms = {}, and then in your template have

<div ng-form="forms.motorForm">

instead of your normal form.

edited Jan 7, 2016 at 6:22

Rudra

1,68816 silver badges30 bronze badges

answered Jan 7, 2016 at 6:05

Brannon Heftel

713 bronze badges

Collectives™ on Stack Overflow

Angular JS Form validation inside tabset give error : TypeError: Cannot read property '$valid' of undefined

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related