Question

我有一个名为myform＆amp;的表格我正在尝试使用以下代码设置ng-disabled：

ng-disabled="myForm.$invalid"

但myForm.$invalid和＆amp; myForm.$valid未定义。究竟是什么问题？我检查了控制台＆amp; 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>

Answer 1

您需要将'myForm'更改为'commisionForm'才能使其正常工作。此外，您的表单需要至少有一个使用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>

{{1}}

Answer 2

如果你想利用angular的内置表单验证，请查看表单指令中的angular文档：

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。从您提供的代码。

myForm。$ valid＆amp; myForm。$ invalid在角形上是不确定的？

2 个答案: