1

我正在尝试在 ng-book jsbin中复制一个示例。

这是我的plnkr

应用程序.js

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

app.controller('MainCtrl', function($scope) {
  $scope.fields = [{placeholder: 'Email', isRequired: true},
               {placeholder: 'Password', isRequired: true},
               {placeholder: 'Comment(Optional)', isRequired: false}]
  $scope.formSubmit = function(){
    for (var i=0; i < $scope.fields.length; i++)
    { var obj = $scope.fields[i] 
      for (var key in obj){
        if(obj.hasOwnProperty(key)){
          alert(key + ' : ' + obj[key])
        }
      }
    }
  }                 
});

html

<html ng-app="plunker">

  <head><script data-require="angular.js@1.2.x"     src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name='main_form' ng-submit='formSubmit()' novalidate>
  <div ng-repeat="field in fields" ng-form="dynamic_form">
    <input type='text'
           name='dynamic_input'
           ng-required='field.isRequired'
           ng-model='field.name'
           placeholder='{{field.placeholder}}'>
        <div ng-show="dynamic_form.dynamic_input.$dirty && dynamic_form.dynamic_input.$invalid">
          <span ng-show="dynamic_form.dynamic_input.$error.required"> This field is required.</span>
        </div> 
      </div>
      <button type='submit' ng-diabled="main_form.$pristine && main_form.$invalid">Submit     All</button>
    </form>
  </body>

</html>

我在这里面临的问题：

  1. 提交按钮未禁用
  2. 未显示必填字段的错误。
  3. 如果我点击提交，我也会在警报中获得 $hash 键。这是为什么？

谢谢。

4

2 回答 2

2

1）提交按钮未被禁用

你有一个错字，它一定是ng-disabled。还可以更改您的条件以在无效时禁用它：-

 <button type='submit' ng-disabled="main_form.$invalid">Submit All</button>

2) 未显示必填字段的错误。

现在，当您删除输入的值时，它会显示

3）如果我点击提交，我也会在警报中获得 $hash 键。这是为什么？

Angular 添加了一个唯一键（$$hashkey）来跟踪重复的项目。如果您track by在 ng-repeat 中指定 a （必须是唯一键），则不会添加它。在您的情况下，因为没有 id 或任何相关联的东西，您可以使用$index. （在演示中，我添加了一个 id 属性并使用它来跟踪）

ng-repeat="field in fields track by $index"

演示

于 2014-08-29T15:31:58.433 回答
2

您在提交按钮中拼错了“禁用”一词。

<button type='submit' ng-diabled="main_fo

你明确告诉它你希望它只在脏的时候才显示错误。因此，在您填写某些内容之前，您不会看到它们，然后再次将其删除。如果您想在填写字段之前查看错误，请删除脏检查。

<div ng-show="dynamic_form.dynamic_input.$dirty &&

$$hashKey 作为 ngRepeat 的一部分添加。为了避免这些属性，AngularJS 在内部（对于 angular.toJson）进行了以下测试。

key.charAt(0) === '$' && key.charAt(1) === '$'

您也可以使用 angular.forEach 来避免检查 hasOwnProperty 但它也不会跳过 '$$' 变量。

于 2014-08-29T15:36:00.570 回答