不顯示使用$錯誤，$無效的表格錯誤

我想在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

不顯示使用$錯誤，$無效的表格錯誤

回答

相關問題