Question

我想使用angularjs验证表单中的所有字段。我在表单中想要的所有其他功能都工作正常，它只是表单验证，根本不起作用。由于我是angularjs的新手，我几乎尝试过所有事情，并且不知道我在这里缺少什么。这是下面的代码

<div class="col-xs-9 col-xs-offset-1" ng-controller="DishCommentController">
            <form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate>
                <div class="form-group" ng-class="{'has-error': commentForm.author.$error.required && !commentForm.author.$pristine}">
                    <label for="name" class="col-xs-2">Your Name</label>
                    <div class="col-xs-10">
                        <input type="text" class="form-control" name="author" id="author" placeholder="Enter Your Name" ng-model="dishComment.author">
                        <span class="help-block" ng-show="commentForm.author.$error.required && !commentForm.author.$pristine">Your Name is Required</span>
                    </div>
                </div> 
                <div class="form-group">
                    <label for="rating" class="col-xs-2">Number of Stars</label>
                    <div class="col-xs-10">
                        <label class="radio-inline">
                            <input type="radio" name="rating" id="rating" value="1" ng-model="dishComment.rating"> 1
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="rating" id="rating" value="2" ng-model="dishComment.rating"> 2
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="rating" id="rating" value="3" ng-model="dishComment.rating"> 3
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="rating" id="rating" value="4" ng-model="dishComment.rating"> 4
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="rating" id="rating" value="5" ng-model="dishComment.rating"> 5
                        </label>
                    </div>
                </div>
                <div class="form-group" class="{'has-error': commentForm.comment.$error.required && !commentForm.comment.$pristine}">
                    <label for="comment" class="col-xs-2">Your comments</label>
                    <div class="col-xs-10">
                        <textarea class="form-control" id="comment" name="comment" rows="12" ng-model="dishComment.comment"></textarea>
                        <span class="help-block" ng-show="commentForm.comment.$error.required && !commentForm.comment.$pristine">Please Write a comment</span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit Comment</button>
                    </div>
                </div>                    
            </form>
        </div>

Javascript代码

'use strict';

angular.module('confusionApp', [])
.controller('DishCommentController', ['$scope', function($scope) {

        $scope.dishComment = {author:"",rating:"5",comment:"",date:""};

        $scope.submitComment = function () {

            //Step 2: This is how you record the date
            $scope.dishComment.date = new Date().toISOString();

            // Step 3: Push your comment into the dish's comment array
            if($scope.dishComment.comment == "") {
                console.log = "incorrect"
            }
            else {
                $scope.dish.comments.push($scope.dishComment);
                $scope.dishComment = {author:"",rating:"",comment:"",date:"" };
                $scope.commentForm.$setPristine();
            }
        }
    }])

 ;

Answer 1

您在输入中缺少VPATH

试试这个

required

表单验证在angularjs中根本不起作用

1 个答案: