角度驗證表格

我有一個簡單的表單。角度驗證表格

<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($scope) { 
    $scope.myForm.myField.$error = "just to see it work"; 
});

爲什麼我得到錯誤 '$ scope.myForm未定義'？

來源

2016-02-13 Bob

因爲您的控制器功能執行時可能還沒有創建表單控制器。你不應該直接在你的表單控制器上設置任何東西。 –

你有模型，模塊和控制器有點困惑。我的解決方案使用1.2角，但你很快就會需要移動到角2 這是我的例子返工：

<html lang="en" ng-app="MyApp"> 
    <head> 
    </head> 
    <body ng-controller="AppCtrl as ctrl"> 
     <form name="myForm" id="myForm"> 
      <input type="text" ng-model="ctrl.myField" name="myField" /> 
      <div style="color: red"> 
       {{ctrl.myField}} 
      </div> 
     </form> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"> 
    </script> 
    <script src="controller.js"></script> 
    </body> 
</html>

而在controller.js：

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

在上面，我已將「myField」放在控制器「AppCtrl」的範圍內。我已將整個頁面置於模塊「MyApp」的控制之下。您可以使用「ng-bind」注入模型，也可以在div的主體中使用大括號符號來綁定「ctrl」的「myField」模型。我已經使用了後者，但請注意，在解析頁面後，將建立此綁定。如果你現在全部加載，你應該看到「只看到它的工作」在紅色下的文本字段，也在文本字段。當您編輯文本框時，紅色文本將會同步更改。一旦你有了這個工作，你永遠不會停止學習更多關於Angular的知識！

我應該補充說這個模型有一個屬性。爲了概括這一點，您將需要創建一個具有多個屬性（每個輸入元素一個）的模型，以便在提交表單時返回JSON對象。

來源

2016-02-13 23:02:37

你的變量名不能有點。

嘗試myFormMyFieldError而不是myForm.myField.$error。

其他：不使用屬性style，請使用CSS文件。

來源

2016-02-13 23:45:13 apocean

角度驗證表格

回答

相關問題