form validation not working in angularjs

Question

-----IN APP CONFIG-----
$routeProvider.
        when("/", {redirectTo: "/dashboard"}).
        when("/dashboard", {template: "<div ng-include='include'>", controller="xCtrl" }).
        .otherwise({redirectTo: "/404"})

-----IN xCtrl-----
app.controller("xCtrl",function($rootScope,$scope,$filter) {
     $scope.include = "pages/abc.html";
     var original;
    $scope.filters = {p_key: ""},
    $scope.showInfoOnSubmit = !1, original = angular.copy($scope.filters),
    $scope.revert = function () {
         return $scope.filters = angular.copy(original),$scope.projectListFilters.$setPristine()
    }, $scope.canRevert = function () {
        return!angular.equals($scope.filters, original) || !$scope.projectListFilters.$pristine
    }, $scope.canSubmit = function () {
        return $scope.projectListFilters.$valid && !angular.equals($scope.filters, original)
    }, $scope.submitForm = function () {
        return $scope.showInfoOnSubmit = !0, $scope.revert()
    }
})

---- IN pages/abc.html ----

    <form name="projectListFilters" data-ng-submit="submitForm()" novalidate>
    <input type="text" data-ng-model="filters.p_key" />
     <button type="submit"
            class="btn btn-primary btn-sm"
            data-ng-disabled="!canSubmit()">Sumbit
    </button>
    <button id="reset" type="reset" class="btn btn-sm btn-warning"
            data-ng-disabled="!canRevert()"
            data-ng-click="revert()">Revert Changes
    </button>
    </form>

There are JavaScript errors in this code regarding $valid , $pristine of undefined object. But if we specify the controller in pages/abc.html file Ex:
<form name="projectListFilters" data-ng-submit="submitForm()" novalidate data-ng-controller="xCtrl">
works fine. What is the error in here ?

The ng-include create a nested child scope and the projectListFilters form would be on it instead of the controller's scope. — runTarm
– runTarm, Commented Aug 14, 2014 at 17:19

Explosion Pills · Accepted Answer · 2014-08-14 17:26:33Z

1

Use templateUrl, not template.

{
    templateUrl: "pages/abc.html",
    controller: "xCtrl",
}

This will have pages/abc.html use xCtrl as its controller. The way you are doing it now, only the <div> with the include has the controller, but the included page does not have it.

From ngInclude:

This directive creates new scope.

answered Aug 14, 2014 at 17:26

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kalhan Over a year ago

I need to use include because I need to get route parameters and load a template based on that parameters :(

Explosion Pills Over a year ago

@KalhanoToressPamuditha create a route for each template instead. In "/dashboard" you can link to the other routes that use those templates instead of doing it the ngInclude way. This should also give you more flexibility for those individual templates.

Kalhan Over a year ago

can u please describe the process a bit :) thank you :)

Collectives™ on Stack Overflow

form validation not working in angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related