AngularJS form.validation不是Function

时间:2018-01-18 13:07:06

标签: angularjs angularjs-scope angularjs-http

AddClass.cshtml文件具有表单,ng-validate使用验证选项。当我单击cshtml文件中的Add Class按钮而不在Textboxes中输入任何值时,它应显示错误消息,但我得到form.validation()不是函数错误。所有js文件都已存在,例如angular-validate.min和jquery.validate.min。知道可能是什么问题吗?

<form name="addclassform" id="addclassform" ng-submit="addClassForm(addclassform)" ng-validate="classValidationOptions">
    <div class="modal-body">
        <div class="form-group">
            <label for="ClassName" class="col-md-3">Class Name</label>
            <input name="ClassName" id="ClassName" class="form-control" ng-model="addClassFormData.ClassName" />
        </div>
        <div class="form-group">
            <label for="Location" class="col-md-3">Location</label>
            <input name="Location" id="Location" class="form-control" ng-model="addClassFormData.Location" />
        </div>
        <div class="form-group">
            <label for="TeacherName" class="col-md-3">Teacher Name</label>
            <input name="TeacherName" id="TeacherName" class="form-control" ng-model="addClassFormData.TeacherName" />
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-success">Add Class</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
</form>

这是AngularJS文件。 classValidationOptions具有所有规则,form.validation()在$ scope.addClassForm中抛出错误

//Validate Class
$scope.classValidationOptions = {
    rules: {
        ClassName: { required: true },
        Location: { required: true },
        TeacherName: { required: true }
    },
    messages: {
        ClassName: { required: "Please enter Class Name." },
        Location: { required: "Please enter the Location." },
        TeacherName: { required: "The field is required." }
    }
};

$scope.addClassFormData = {};

//Adds a Class
$scope.addClassForm = function (form) {
    if (form.validate()) {
        $http({
            method: "POST",
            url: "/Home/AddClass",
            data: $.param($scope.addClassFormData),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function Success(response) {
            var data = angular.fromJson(response.data);
            if (data.success) {
                $scope.loadClasses();
                $('#addClass').modal('hide');
                $scope.resetClassForm("add");
                //toastr.success(data.msg, 'Success');
            }
            else {
                //toastr.error(data.msg, 'Error');
            }
        });
    }
};

enter image description here

1 个答案:

答案 0 :(得分:0)

我找到了错误。问题是我没有在模块中编写ngValidate

代码不正确

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

正确代码

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