Kenny Kenny - 5 months ago 63
AngularJS Question

Angular <a> ng-click function validate before redirect

I currently have a user input and an Go tag (code below). I'm trying to validate the user's input on the click of the "Go" button. But the page keep redirecting regardless of validation.

I feel like it'd be best to just use the

href
to go the the
event/:eventid
route. Is there a way to validate it before the page redirects? Thanks!

view

<div class="small-9 columns">
<input ng-model="vm.eventid" class="event-id" type="text" placeholder="Event ID" maxlength="7">
</div>
<div class="small-3 columns">
<a ng-click="vm.validate()" href="/#/event/{{ vm.eventid }}" class="button postfix event-submit">Go</a>
</div>
<div role="alert" ng-show="vm.formError" class="alert alert-danger">{{ vm.formError }}</div>


controller

(function() {

angular
.module('eventApp')
.controller('homeCtrl', homeCtrl);

homeCtrl.$inject = ['$scope'];
function homeCtrl ($scope) {
var vm = this;

vm.title = "Monitor";

vm.formData = {};
vm.validate = function() {
vm.formError = "";
if (!vm.eventid) {
vm.formError = "Please enter Event ID";
$event.preventDefault();
return false;
} else {
vm.formError = vm.eventid + " entered";
$event.preventDefault();
return false;
}
};
}

})();

Answer

You should be passing in the $event object from your template into the controller. So your code should look like this:

vm.validate = function($event) {
            vm.formError = "";
            if (!vm.eventid) {
                vm.formError = "Please enter Event ID";
                $event.preventDefault();
                return false;
            } else {
                vm.formError = vm.eventid + " entered";
                $event.preventDefault();
                return false;
            }
        };

And your template:

<div class="small-3 columns">
    <a ng-click="vm.validate($event)" href="/#/event/{{ vm.eventid }}" class="button postfix event-submit">Go</a>
</div>
Comments