angularJS显示消息的验证

Question

＆＃13;

＆＃13;

here is the angular code. 

.controller("myStuList", ['$scope', "weejoinMessage", "httpServer", "$modal", "ngWeeJoinServer", "stuServer", function ($scope, weejoinMessage, httpServer, $modal, server, stuServer) {
    
        //第一次进入是加载所有学员数据
        $scope.stuinfos = infos.info; // i give the data form info.info to stuinfos.

        //
        $scope.course = '';
        $scope.class = '';
        $scope.name = '';
        $scope.age = '';
        $scope.scores = '';

        $scope.createNew = function () {
            httpServer.httpHandle({
                url: stuBag.action.createNew,
                data: {
                    courseId: $scope.course,
                    classId:$scope.class,
                    stuname: $scope.name,
                    age: $scope.age,
                    scores: $scope.scores
                },
                success: function (data) {
                    weejoinMessage.messageSuccess("添加成功！");                   
                    $scope.stuinfos.push({ 'CourseName': $scope.course, 'ClassName': $scope.class, 'StuName': $scope.name, 'Age': $scope.age, 'Scores': $scope.scores });                   
                }
            });
           
        };

＆＃13;

＆＃13;

＆＃13;

请帮忙看看问题。打开创建页面时，所有验证消息都会显示出来。 查看html代码。我想在单击输入文本时显示验证消息。当输入消息根据验证错误时。并在输入texbox下面显示消息。

＆＃13;

＆＃13;

<div ng-app="stu.info" ng-controller="myStuList">
    <form name="createnew_form"  class="form-horizontal" role="form" ng-submit="createNew()" novalidate>


        <div class="form-group">
            <label for="stuname" class="col-md-2 control-label">姓名</label>
            <div class="col-md-4">
                <input type="text" class="form-control" placeholder="姓名" name="stuname" ng-model="name" ng-minlength=3 ng-maxlength=20 required />
                <div class="error" ng-show="createnew_form.stuname.$dirty && createnew_form.stuname.$invalid">
                    <small class="error" ng-show="createnew_form.stuname.$error.required">
                        请输入姓名
                    </small>
                    <small class="error" ng-show="createnew_form.stuname.$error.minlength">
                        至少输入两个字
                    </small>
                    <small class="error" ng-show="createnew_form.stuname.$error.maxlength">
                        最多输入五个字
                    </small>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">年龄</label>
            <div class="col-md-4">
                <input type="number" min="0" max="100" required class="form-control" name="age"
                       ng-model="age" />
                <div class="error-container" ng-show="createnew_form.age.$dirty && createnew_form.age.$invalid">                    
                    <small class="error" ng-show="createnew_form.age.$error.required">
                        请输入年龄
                    </small>
                    <small class="error" ng-show="createnew_form.age.$error.min">
                        最小年龄为0
                    </small>
                    <small class="error" ng-show="createnew_form.age.$error.max">
                        最大年龄为100
                    </small>
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <div style="padding-left:110px">
                <input type="submit" value="确认添加" class="btn btn-primary" />
            </div>
        </div>
    </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我在jsFiddle上使用了你的代码，表单验证按预期工作。 我没有像你提到的那样看到所有的错误信息。请在此处查看小提琴：http://jsfiddle.net/giri_jeedigunta/4508cd4r/

您的HTML代码：

＆＃13;

＆＃13;

<div ng-app="stu.info" ng-controller="myStuList">
    <form name="createnew_form"  class="form-horizontal" role="form" ng-submit="createNew()" novalidate>


        <div class="form-group">
            <label for="stuname" class="col-md-2 control-label">姓名</label>
            <div class="col-md-4">
                <input type="text" class="form-control" placeholder="姓名" name="stuname" ng-model="name" ng-minlength=3 ng-maxlength=20 required />
                <div class="error" ng-show="createnew_form.stuname.$dirty && createnew_form.stuname.$invalid">
                    <small class="error" ng-show="createnew_form.stuname.$error.required">
                        请输入姓名
                    </small>
                    <small class="error" ng-show="createnew_form.stuname.$error.minlength">
                        至少输入两个字
                    </small>
                    <small class="error" ng-show="createnew_form.stuname.$error.maxlength">
                        最多输入五个字
                    </small>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">年龄</label>
            <div class="col-md-4">
                <input type="number" min="0" max="100" required class="form-control" name="age"
                       ng-model="age" />
                <div class="error-container" ng-show="createnew_form.age.$dirty && createnew_form.age.$invalid">                    
                    <small class="error" ng-show="createnew_form.age.$error.required">
                        请输入年龄
                    </small>
                    <small class="error" ng-show="createnew_form.age.$error.min">
                        最小年龄为0
                    </small>
                    <small class="error" ng-show="createnew_form.age.$error.max">
                        最大年龄为100
                    </small>
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <div style="padding-left:110px">
                <input type="submit" value="确认添加" class="btn btn-primary" />
            </div>
        </div>
    </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不应creatnew_form.course.$invalid为createnew_form.course.$invalid（“newnew”中带有'e'）？