У меня есть форма с именем myform
и я пытаюсь установить ng-disabled
с помощью этого кода:
ng-disabled="myForm.$invalid"
но оба myForm.$invalid
& myForm.$valid
не определены. В чем проблема? Я проверил в консоли, и myForm
правильно установлен в форму.
ОБНОВИТЬ
<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>
Вам нужно изменить "myForm" на "commisionForm", чтобы он работал. Кроме того, ваша форма должна иметь по крайней мере один элемент, который привязывается к модели, используя ng-model
. В противном случае проверка не будет срабатывать.
Пример рабочего кода:
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>
Если вы хотите использовать угловую встроенную проверку формы, проверьте угловую документацию по директиве формы:
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>
Обратите внимание, что атрибут имени формы должен отображаться в службах угловой проверки. Похоже, вы не изменили это в своем коде.
myForm не undefined
потому что в соответствии с вашим кодом имя вашей формы является commissionForm
не myForm
. Из кода, который вы предоставили.