当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Prevent navigating to another route if form in current template is invalid angularjs

问题描述:

I am having tab structure in my application like below :

and for each tab I have a form and a submit button. If all the form data is not filled then I am showing the Error popup(using angular UI bootstap Modal popup) which displays "Fill the Account Creation Data" on click of the Submit button.

But What I want to do is when user clicks on Personal Details Tab (or any other tab) shown in above image, then also I want to show the error message that "Fill the Account Creation Data"

In general if user click on any tab, and if one of the form is not completely filled then Error popup should be displayed.

I have written the code to show error Popup on click of the Submit button,

But not sure how to achieve this on the click of the tab Routes.

My code for the route is as follow :

onboardingApp.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {

$routeProvider.when('/empDetails', {

templateUrl: 'templates/employeeDetails.html',

controller: 'empDetailsController',

activeLink: 'empDetails',

data: {

login: false

}

});

$routeProvider.when('/login', {

templateUrl: 'templates/login.html',

controller: 'loginController',

activeLink: 'login',

data: {

login: true

}

});

$routeProvider.when('/accType', {

templateUrl: 'templates/accountType.html',

controller: 'accountTypeController',

activeLink: 'accType',

data: {

login: false

}

});

$routeProvider.when('/verifyID', {

templateUrl: 'templates/identityVerification.html',

controller: 'verifyIdentityController',

activeLink: 'verifyID',

data: {

login: false

}

});

$routeProvider.when('/personalDetails', {

templateUrl: 'templates/personalDetails.html',

controller: 'personalDetailsController',

activeLink: 'personalDetails',

data: {

login: false

}

});

$routeProvider.otherwise({

redirectTo: '/login'

});

}]);

Kindly help me in this case. Is there any way to check the form validity in Resolve property in route configuration?

Thanks in Advance !

分享给朋友:
您可能感兴趣的文章:
随机阅读: