Question

我试图在ng-book jsbin中复制一个例子。

这是我的plnkr

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

我面临的问题：

未禁用提交按钮
未显示必填字段的错误。
如果我点击提交，我也会收到$ hash密钥以及提醒。那是为什么？

感谢。

Answer 1

1）未禁用提交按钮

你有一个拼写错误，必须是ng-disabled。同时更改您的条件以在无效时禁用它： -

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

2）未显示所需字段的错误。

现在，当您删除键入值

时，它会显示

3）如果我点击提交，我也会获得$ hash密钥以及提醒。那是为什么？

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

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

<强> Demo

Answer 2

你拼错了这个词＆＃34; disabled＆＃34;在提交按钮中。

<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，但它不会跳过＆＃39; $$＆＃39;变量要么。

使用$ error，$ invalid无法显示表单错误

2 个答案: