Angular 验证中的 ng-disabled 未按预期工作答案

【问题标题】：ng-disabled in Angular validation not working as expectedAngular 验证中的 ng-disabled 未按预期工作
【发布时间】：2015-03-12 01:08:51
【问题描述】：

http://plnkr.co/edit/9Yq6aZHtKCuZMtPbjBIN?p=preview

我已经尝试并试图让它工作，但我没有运气。我正在尝试使用 angularJS 和内置验证功能禁用提交按钮。我发现当你第一次加载表单时，提交按钮是活动的——不是禁用的！

我已经测试并尝试过，我发现我的验证代码在团队名称中接受一个空字符串/空字符串，尽管我需要输入。

有人知道如何正确格式化吗？我让它工作的唯一方法是用一个空格替换一个空字符串来伪造数据......在生产中这是不可接受的......

这里是 index.html：

<body ng-controller="EnterController as enter">
  <div class="panel panel-primary">
    <div class="panel-body">
      <form name="enterFormNew" ng-submit="enter.TeamNameNext()" autocomplete="off" novalidate>
        <div class="row">
          <div class="col-xs-8 col-md-6">
            <div class="form-group">
              <label for="teamname">Team Name</label>
              <input name="TeamName" ng-required ng-minlength="2" ng-maxlength="40" ng-model="enter.Team.Name" type="text" id="teamname" class="form-control" />
              <p ng-show="enterFormNew.TeamName.$touched && enterFormNew.TeamName.$invalid">This is not a valid team name.</p>
            </div>
            <div class="form-group">
              <label for="division">Division</label>
              <select name="selectDivision" ng-required ng-model="enter.Team.Division" id="division" class="form-control" ng-options="division.Name for division in enter.Divisions track by division.Id ">
                <option value="">Select...</option>
              </select>
              <p ng-show="enterFormNew.selectDivision.$touched && enterFormNew.selectDivision.$invalid">A valid Division needs to be selected.</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-2">
            <button type="submit" class="btn btn-primary" ng-disabled="enterFormNew.$invalid">Next</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

这里是 app.js：

angular.module('Enter', [])
.controller("EnterController", [
  function() {
    this.RegistrationPhase = 0; 

    this.Divisions = [{ Id: 1,Name: "Normal"}, {Id: 2,Name: "Not Normal"}];

    this.Team = { Name: "", ResumeKey: null, Division: { Id: -1 }, Players: []};

    this.TeamNameNext = function() {
      //Code removed

      alert("Made it to the submit function!")

    };

  }
]);

【问题讨论】：

标签： javascript angularjs angularjs-validation

【解决方案1】：

属性ng-required 需要一个值。不要与不需要值的 HTML5 属性 required 混淆。

ng-required="true"

【讨论】：

好收获！我已经更新了 plunker，它适用于 input[text]，但这不适用于 select 语句。想法？
您正在跟踪division.ID的选择选项，然后在选择选项为空时，该分组是“-1”的角度解释。因此，您始终为您的部门设置一个值。我已经分叉了你的 plunker 并解决了这个问题：plnkr.co/edit/DWslWHd6hw1sAOVIDnlR?p=preview 如果你的问题已经解决，请接受答案。干杯

【解决方案2】：

因为“Team.Division”在您的控制器代码中没有未定义。

如果你可以使用下面的代码，你会得到你所期望的。

this.Team = { Name: "", ResumeKey: null, Division: undefined, Players: []};

您可以使用 null 或 "" 代替 undefined。

【讨论】：