Question

我是Angularjs的新手，下面是我的代码，

<!DOCTYPE html>
<html>
    <head>
        <title>ng-Messages Service</title>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
        <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
        <script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script>
        <script src="ng-messages.js"></script>
    </head>

    <body>

        <div ng-controller='thecontroller'>
            <form name="myForm">
            <label>
              Enter text:
              <input type="text" ng-model="field" name="myField" required minlength="5" />
            </label>
            <div ng-messages="myForm.myField.$error" role="alert">
              <div ng-message="required">You did not enter a field</div>
              <div ng-message="minlength, maxlength">
                Your email must be between 5 and 100 characters long
              </div>
            </div>
            </form>
        </div>
    </body>
</html>

以下是angularjs代码，

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

myApp.controller('thecontroller',function($scope){
    $scope.name="Gopal";
});

我们没有得到正确的输出，我上面的代码出了什么问题。

由于

Answer 1

您的html模板中没有提及ng-app="myApp"。

另请确保您已引用所需的.js文件。我认为这包括模块声明。

<script src="ng-messages.js"></script>

<强>样本

var myApp=angular.module('myApp',['ngMessages']);

myApp.controller('thecontroller',function($scope){
    $scope.name="Gopal";
});

<!DOCTYPE html>
<html>
    <head>
        <title>ng-Messages Service</title>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
        <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
        <script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script>
    </head>
    <body ng-app="myApp">

        <div ng-controller='thecontroller'>
            <form name="myForm">
            <label>
              Enter text:
              <input type="text" ng-model="field" name="myField" required minlength="5" />
            </label>
            <div ng-messages="myForm.myField.$error" role="alert">
              <div ng-message="required">You did not enter a field</div>
              <div ng-message="minlength, maxlength">
                Your email must be between 5 and 100 characters long
              </div>
            </div>
            </form>
        </div>
    </body>
</html>

Answer 2

You need to specify ng-app="your Module name" to bootstrap the application when index.html page start to load. It triggers the AngularJs life cycle automatically.
 Note- You may also specify the pattern for validating email that is email is valid or not
    <!DOCTYPE html>
        <html >
            <head>
                <title>ng-Messages Service</title>
                <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
                <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
                <script src='https://code.angularjs.org/1.5.0-rc.0/angular-messages.min.js'></script>
                <script src="ng-messages.js"></script>
            </head>

            <body ng-app="myApp">

                <div ng-controller='thecontroller'>
                    <form name="myForm">
                    <label>
                      Enter text:
                      <input type="text" placeholder="abc@eyz.com" ng-model="field" name="myField"  data-ng-required="true" minlength="5" maxlength="100" ng-pattern="/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/i"/>
                    </label>
                      <div data-ng-show="myForm.myField.$error.required">You did not enter a field</div>
                      <div data-ng-show="myForm.myField.$error.min 
                                                                || myForm.myField.$error.max">
                        Your email must be between 5 and 100 characters long
                      </div>
                      <div data-ng-show="myForm.myField.$error.pattern" >The email id is not valid</div
                    </form>
                </div>
            </body>
        </html>

我的AngularJs代码有问题

2 个答案: