不显示使用$错误，$无效的表格错误

我想在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="[email protected]"  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 key以及alert。这是为什么？

谢谢。

来源

2014-08-29 Indyarocks

我可以向您展示另一个以不同方式进行验证的例子，或者您完全想要这种方式吗？ – 2014-08-29 14:33:40

当然。最受欢迎的。 – Indyarocks 2014-08-29 16:48:04

1）提交未禁用按钮

你有一个错字就必须ng-disabled。同时改变你的状态无效时禁用： -

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

2）错误为必填字段不被显示。

现在会显示出来，当你删除键入值

3）如果我点击提交，我得到$散列键以及处于警戒。这是为什么？

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

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

Demo

来源

2014-08-29 15:31:58 PSL

非常感谢。特别是对于演示的额外努力:) – Indyarocks 2014-08-29 16:56:37

你吃了欢迎.. :) – PSL 2014-08-29 17:38:27

我没有：P随时欢迎你:) 你可能会看到很多问题轰炸在角度上的stackoverflow。当我最近开始学习angularjs。 – Indyarocks 2014-08-29 18:22:36

你在你的提交按钮拼错单词“已禁用”。

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

你明确地告诉它，你希望它只显示错误，如果它很脏。因此，除非您填写内容，否则您不会看到它们，然后再将其重新删除。如果您想在填充字段之前查看错误，请删除脏检查。

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

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

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

您还可以使用angular.forEach，以避免检查hasOwnProperty但并不要么跳过“$$”变量。

来源

2014-08-29 15:36:00

不显示使用$错误，$无效的表格错误

回答

相关问题