用Angular處理表單：錯誤不顯示

我有簡單的表單。我需要顯示關於我的領域的錯誤。用Angular處理表單：錯誤不顯示

<html lang="en" ng-app="MyApp"> 
    <head></head> 
    <body ng-controller="AppCtrl"> 

     <form name="myForm" id="myForm"> 
      <input type="text" ng-model="field" name="myField" /> 
      <div ng-show="myForm.myField.$error" style="color: red"> 
       {{myForm.myField.$error}} 
      </div> 
     </form> 

     <script src="bower_components/angular/angular.js"></script> 
     <script src="controller.js"></script> 
    </body> 
</html>

這是我的控制器

angular.module('MyApp',[]) 
    .controller('AppCtrl', function() { 
     var form = document.getElementById("myForm"); 
     var error = { 
       myField: 'Error in this field' 
     }; 
     for (var key in error) { 
      form[key].$error = error[key]; 
     } 
    });

爲什麼我不能看到MyField的錯誤？我只得到「{}」

來源

2016-02-13 Bob

在AngularJS中**在'controller'中從不**訪問像'document.getElementById（「myForm」）'這樣的DOM，你一定會很糟糕，你很快就會掙扎。控制器管理Model not VIEW和Directive管理VIEW。現在在AngularJS中管理表單驗證有一個簡單的方法，請查看這個[簡單教程]（https://scotch.io/tutorials/angularjs-form-validation）。它會比你想像的更容易，更容易做到。 – MacKentoch

你不是形式正確地結合AngularJS

<form name="myForm" id="myForm">

這是說你的形式被稱爲myForm，所以在你的控制器，你應該使用$scope.myForm

無需要var form = document.getElementById("myForm");，只需在您的控制器中使用$scope.myForm

請嘗試此操作以查看您是否從AngularJS訪問表單

angular.module('MyApp',[]) 
    .controller('AppCtrl', function($scope) { 
      $scope.myForm.myField.$error = "just to see it work"; 
});

來源

2016-02-13 19:38:05 bakkal

我收到錯誤'$ scope.myForm未定義'。 – Bob

您是否在控制器中注入$ scope？ – klode

@Bob yes看到我的答案中的代碼片段，這要歸功於Tomasz Bawor的編輯，他將$ scope添加到控制器中 – bakkal

用Angular處理表單：錯誤不顯示

回答

相關問題