Question

我有一个简单的表格。

<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 is undefined'？

Answer 1

你的模型，模块和控制器有点混乱。我的解决方案使用Angular 1.2，尽管您很快就需要转移到Angular 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";
}]);

在上面，我已经把＃14; myField＆＃34;在控制器＆＃34; AppCtrl＆＃34;的范围内。我已将整个页面置于模块＆＃39; MyApp＆＃39;的控制之下。您可以使用＆＃34; ng-bind＆＃34;注入模型。或者在div的主体中使用花括号表示法绑定到＆＃34; myField＆＃34; ＆＃34; ctrl＆＃34;的模型。我已经使用了后者，但请注意，在解析页面后将建立此绑定。如果你现在全部加载，你应该看到＆＃34;只看到它工作＆＃34;在文本字段下面的红色，也在文本字段内。编辑文本框时，红色文本将同步更改。一旦你有了这个工作，你永远不会想停止学习更多关于Angular的知识！

我应该补充一点，这个模型有一个属性。为了概括这一点，您需要创建一个具有多个属性的模型（每个输入元素一个），以便在提交表单时返回JSON对象。

Answer 2

您的变量名称中不能包含点。

尝试使用myFormMyFieldError代替myForm.myField.$error。

附加：使用CSS文件，而不是使用属性style。

角度验证表格

2 个答案: