angularJS中的动态表单验证不起作用答案

【问题标题】：Dynamic form validation in angularJS not workingangularJS中的动态表单验证不起作用
【发布时间】：2015-02-27 17:55:45
【问题描述】：

我创建了动态表单，并将ng-required 属性动态添加到我的控件中。但现在它不工作了。

这是我的 JS：

    var app = angular.module('birthdayToDo', []);

    app.controller('main', function($scope){ 
      $scope.Control={};
     $scope.Attributes =[
   {
     "Name":"FirstName",
     "Required":true
   },
   {
     "Name":"LastName",
     "Required":false
   },
   {
     "Name":"Email",
     "Required":true
   },
   {
     "Name":"Age",
     "Required":false
   }];

        $scope.submitForm = function(isValid) {

            // check to make sure the form is completely valid
            if (isValid) { 
                alert('our form is amazing');
                alert($scope.Control[1]);  // to check correct index
            }else{
              return;
            }

        };
    });

还有我的 HTML：

<html>

<head lang="en">

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
  <script src="app.js"></script>

</head>

<body ng-app="birthdayToDo" ng-controller="main">
  <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
    <table>
      <tr ng-repeat="attribute in Attributes">
        <td>{{attribute.Name}}</td>
        <td>
          <input type="text" name="Control[$index]" ng-model="Control[$index]" ng-required="{{attribute.Required}}" />
        </td>
        <td>
         <p ng-show="userForm.Control[$index].$error.required">{{attribute.Required == "true" && attribute.Name+' Required' || ''}}</p>
        </td>
      </tr>
    </table>
    <input type="submit" value="Save" />
  </form>
</body>

Plunker Link

我想在文本框值更改或提交表单时显示错误消息。

但是当我用静态表单做同样的事情时，它就可以工作了。 working plunker

【问题讨论】：

您使用的是 1.0.3？它太旧了。你需要升级。直到 1.3 动态控件名称才支持表单验证。
@PSL：我已经更新了我的版本。现在工作但不显示错误消息

标签： javascript html angularjs angularjs-ng-model angularjs-validation

【解决方案1】：

动态控件名称和表单验证不适用于较旧的 Angular 版本 (

1) 正如@dfsq 所提到的，您需要为 ng-required 绑定范围属性提供一个布尔值，否则您最终会为控件设置真实的“true”/“false”，这将使一切都成为必需的。

2) 使用 ng-attr-name 提供插值的动态名称。会自动展开为name属性。

3) 在 1.3 中 form controller 在与控件同名的属性上设置 $error.required 属性，并且它填充了一些更特殊的属性。您始终可以使用form.$error.$required.length 跟踪所需错误的总数

4) 不要使用index来设置ng-model，使用合适的属性名本身，这样更易读，更容易管理。

5) 您还可以利用 one-time binding (::) 来避免不需要的监视，例如字段名称、显示名称、必需属性（如果它们是不变的列表）。

6) 您可以根据需要使用表单控制器的特殊属性来管理您的验证和其他behaviors and interactions。这是一个示例演示，它仅使用了表单控制器提供的一小部分。

查看：

<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
    <table>
      <tr ng-repeat="attribute in Attributes">
        <td>{{::attribute.Name}}</td>
        <td>
          <input type="text" ng-attr-name="{{::attribute.Name}}" ng-model="Control[attribute.Name]" ng-required="::attribute.Required" />
        </td>
        <td>
          <p ng-if="userForm[attribute.Name].$error.required" class="error">{{attribute.Name }} Required</p>
        </td>
      </tr>
    </table>
    <input type="submit" value="Save" ng-disabled="userForm.$invalid"/>{{Control}}
  </form>

控制器：

 /* Set proper boolean values to Required*/
 $scope.Attributes = [{
    "Name": "FirstName",
    "Required": true
  }, {
    "Name": "LastName",
    "Required": false
  }, {
    "Name": "Email",
    "Required": true
  }, {
    "Name": "Age",
    "Required": false
  }];

  $scope.submitForm = function(isValid) {

    // check to make sure the form is completely valid
    if (isValid) {
     /*Now control will have proper property names with respective ngmodel names*/
      console.log($scope.Control); 
    } else {
      return;
    }

  };

示例演示

var app = angular.module('birthdayToDo', []);

app.controller('main', function($scope) {

  $scope.Control = {};

  //Set boolean values to Required
  $scope.Attributes = [{
    "Name": "FirstName",
    "Required": true 
  }, {
    "Name": "LastName",
    "Required": false
  }, {
    "Name": "Email",
    "Required": true
  }, {
    "Name": "Age",
    "Required": false
  }];

  $scope.submitForm = function(isValid) {


    if (isValid) {
      alert('our form is amazing');
      console.log($scope.Control); /*Use Controle object which has proper property names to reflect respective ngModel*/
    } else {
      return;
    }

  };
});

.error {
  color: red;
}
input.ng-invalid {
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<div ng-app="birthdayToDo" ng-controller="main">
  <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
    <table>
      <tr ng-repeat="attribute in Attributes">
        <td>{{::attribute.Name}}</td>
        <td>
          <input type="text" ng-attr-name="{{::attribute.Name}}" ng-model="Control[attribute.Name]" ng-required="::attribute.Required" />
        </td>
        <td>
          <p ng-if="userForm[attribute.Name].$error.required" class="error">{{attribute.Name }} Required</p>
        </td>
      </tr>
    </table>
    <input type="submit" value="Save" ng-disabled="userForm.$invalid"/>{{Control}}
  </form>
</div>

【讨论】：

非常感谢。它正在工作。而且我已经更正了我的索引代码。现在使用属性名
祝你新年快乐，希望你在来年有很多祝福。