CODEWITHSUNDEEP
angularjs
Mr Smith
Mr Smith

Reputation: 3486

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

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>

Upvotes: 1

Views: 5955

Answers (2)

fikkatra
fikkatra

Reputation: 5792

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>

Upvotes: 3

chrisl-921fb74d
chrisl-921fb74d

Reputation: 23100

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.

Upvotes: 0

Related Questions