3

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>

プランカーリンク

テキストボックスの値が変更されたとき、またはフォームが送信されたときにエラーメッセージを表示したい。

しかし、静的フォームで同じことをしているときは機能しています。 ワーキングプランカー

4

1 に答える 1

5

動的なコントロール名とフォームの検証は、古い角度バージョン (< 1.3.x) ではうまく機能しません。それに加えて、非常に古い角度バージョン (1.0.3) があります。angularの1.3.xバージョンにアップグレードすると、いくつかの変更でこれを簡単に実現できます（そのうちのいくつかはとにかく必要です）：

1) @dfsq で述べたように、ng-required バインド スコープ プロパティにブール値を指定する必要があります。そうしないと、コントロールに真の「true」/「false」を設定することになり、すべてが必要になります。

2)ng-attr-name補間された動的な名前を提供するために使用します。name 属性に自動的に展開されます。

3) 1.3フォーム コントローラーでは、コントロールの名前と同じ名前のプロパティにプロパティを設定し、$error.requiredさらにいくつかの特別なプロパティを設定します。必要なエラーの総数をいつでも追跡できますform.$error.$required.length

4) インデックスを使用して ng-model を設定しないでください。読みやすく管理しやすいように、適切な属性名自体を使用してください。

5)ワンタイム バインディング ( ::)を利用して、不必要な監視、たとえばフィールド名、表示名、必須属性 (変更されないリストの場合) を回避することもできます。

6) フォーム コントローラーの特別なプロパティを使用して、必要に応じて検証やその他の動作や対話を管理できます。これは、フォーム コントローラーが提供するものの小さなサブセットのみを利用したサンプル デモです。

意見：

<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>

于 2014-12-31T18:49:00.303 に答える