Question

在我的项目中，我想进行现场验证。所以我找到了一个教程如何做到这一点。按照教程我得到了这段代码。

var app = angular.module('RegistrationScreen', []);

 app.controller('RegistrationScreenController',  function($scope, $http) {
       $http({
         method: 'GET',
         url: '/lt'
       }).then(function successCallback(response) {

        $scope.nameList = response.data.registrationNameTags;
        $scope.topics = response.data.topicList;
        $scope.bankDivisions = response.data.bankDivisionList;

        document.title =  response.data.registrationNameTags.title;
          });

 });
var applic = angular.module('app', ['ngMessages'])

<!DOCTYPE html>
<html lang="en" ng-app="RegistrationScreen" >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 60px;
        }
        textarea { resize:none; }
    </style>
    <script src="js/angular.min.js"></script>
    <script src="//code.angularjs.org/1.4.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
    <script src="js/registration.js"></script>

</head>
<body ng-app="applic" ng-controller="RegistrationScreenController as main">
        <div class="container">
            <h1>{{ nameList.header }}</h1>
        </div>

        <form name="nameForm" class="form-horizontal" novalidate>
            <div class="center-block">
                <div class="form-group"  ng-class="{ 'has-error': nameForm.name.$touched && nameForm.name.$invalid }">
                    <label for="inputName" ng-model="inputName" class="col-xs-3 control-label">{{ nameList.name }}</label>
                    <div class="col-xs-5">
                        <input type="text" name="name" class="form-control" id="inputName"
                               ng-model="main.name"
                               ng-minlength="5"
                               ng-maxlength="10"
                               required>
                        <div class="help-block" ng-messages="nameForm.name.$error" ng-if="nameForm.name.$touched">
                            <p ng-message="minlength">Your name is too short.</p>
                            <p ng-message="maxlength">Your name is too long.</p>
                            <p ng-message="required">Your name is required.</p>
                        </div>
                    </div>
                </div>
              </div>
              </form>
</body>
</html>

如果名称小于5个符号，则应写入“您的名字太短”，如果名称大于10个符号，则“您的名字太长”，如果没有任何书写，则“需要您的名字”。如果我满足要求，错误消息应该消失。现在来问题了。问题是，如果我写的名称包含少于5个符号，它仍会打印所有3个错误消息。之后，如果我满足要求，错误消息不会消失，而只是将它们的颜色更改为灰色。我究竟做错了什么？以下是此代码如何工作的两个屏幕截图。

Answer 1

你对模块没什么困惑。删除ng-app="applic"属性并使用ngMessages依赖项创建单个RegistrationScreen模块：

var app = angular.module('RegistrationScreen', ['ngMessages']);

然后您不需要var applic = angular.module('app', ['ngMessages']);

角度字段验证

1 个答案: