Question

我创建了动态表单，并将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

Answer 1

动态控件名称和表单验证对于较旧的角度版本（＆lt; 1.3.x）不能很好地工作。另外，你有一个非常古老的角度版本（1.0.3）。如果您升级到1.3.x版本的角度，您可以通过一些更改轻松实现这一点（其中一些是您需要的）：

1）正如@dfsq所提到的，你需要为ng-required绑定范围属性提供一个布尔值，否则你最终会向控件设置truthy“true”/“false”，它将完成所需的一切。

2）使用 ng-attr-name 提供插值动态名称。它会自动扩展为name属性。

3）使用1.3 form controller 在属性上设置一个$error.required属性，其名称与控件的名称相同，并且它会填充一些特殊属性。您始终可以使用form.$error.$required.length

跟踪所需错误的总数

4）不要使用索引来设置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>

angularJS中的动态表单验证无效

1 个答案: