both myForm.$valid & myForm.$invalid are undefined on angular form? - angularjs

Question

I have a form named myform & I'm trying to set ng-disabled with this code:
ng-disabled="myForm.$invalid"
but both myForm.$invalid & myForm.$valid are undefined. What is the issue exactly? I checked in console & myForm is correctly set to the form.
UPDATE
<form id="commissionForm" name="myForm" class="form-horizontal">
<div class="form-group">
<div class="col-sm-8 col-md-8 col-lg-8 col-xs-8" />
<div class="col-sm-2 col-md-2 col-lg-2 col-xs-2" >
<button name="NextBtn" id="NextBtn"
ng-class="{disabled:commissionForm.$invalid}"
ng-disabled="myForm.$invalid"
ng-click="nextBtnClicked()" class="btn btn-primary"
>Next</button>
</div>
</div>
</form>

Answer 1

You need to change 'myForm' to 'commisionForm' to make it work. Also, your form needs to have at least one element that binds to the model, using ng-model. Otherwise, validation will not fire.
Working code sample:
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<form id="commissionForm" name="commissionForm" class="form-horizontal">
<div>form $valid: {{commissionForm.$valid}}</div>
<div>form $invalid: {{commissionForm.$invalid}}</div>
<div>An input box with max length 5, to make the form invalid:</div>
<input ng-maxlength="5" ng-model="somemodel"/>
<div class="form-group">
<div class="col-sm-8 col-md-8 col-lg-8 col-xs-8" />
<div class="col-sm-2 col-md-2 col-lg-2 col-xs-2">
<button name="NextBtn" id="NextBtn" ng-class="{disabled:commissionForm.$invalid}" ng-disabled="commissionForm.$invalid" ng-click="nextBtnClicked()" class="btn btn-primary">Next</button>
</div>
</div>
</form>
</div>

Answer 2

If you want to utilize angular's built in form validation check out angular's documentation on the form directive:
https://docs.angularjs.org/api/ng/directive/form
<form name="myForm" ng-controller="FormController" class="my-form">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
<code>userType = {{userType}}</code><br>
<code>myForm.input.$valid = {{myForm.input.$valid}}</code><br>
<code>myForm.input.$error = {{myForm.input.$error}}</code><br>
<code>myForm.$valid = {{myForm.$valid}}</code><br>
<code>myForm.$error.required = {{!!myForm.$error.required}}</code><br>
</form>
Take note that the form name attribute should map to the angular validation services. Looks like you didn't change that in your code.
myForm is undefined because according to your code the name of your form is commissionForm not myForm. From the code you provided.