Angular few events on one button

Question

learning Angular, met another issue in my way, hope anyone can help. I've got one button that must perform two actions: download something and send formdata to the server. So I've wrote this:

<form id='download'>
  <label for='name'>Name:</label>
  <input type='name' ng-model='nameValue'>
  <label for='email'>Email:</label>
  <input type='email' id='email' ng-model='emailValue'>
</form>

<a ng-click='sendFormDataIfVal()' href="{{filename}}" download="{{filename}}">Download</a>

But the problem and my question is - now downloading and sending occur simultaneously while I wanna download file only if emailValue pass validation and nameValue is not empty. Suppose it's gonna be something like this, but I dunno how to complete function

$scope.sendFormDataIfVal = function() {
  $scope.validateEmail() && $scope.sendFormData();  // download & send
  if(!$scope.validateEmail()) {
    // do not download and do not send
  }
};

Any advise will be greatly... u know :)

CodeToad · Accepted Answer · 2016-06-21 12:18:36Z

One approach is to disable the link using css. once enabled, both the click event handler and the native download function will work.

toggle the link's 'disabled' css class via a validation function

here is a working example

HTML

  <body ng-app="myApp" ng-controller="myController">
        <form id="download">
          <label for="name">Name:</label>
          <input type="name" ng-model="nameValue" />
          <label for="email">Email:</label>
          <input type="email" id="email" ng-model="emailValue" />
        </form>
        <a ng-class="{'disabled' :  !isFormValid()}"  ng-click="sendFormData()" ng-href="{{fileUrl}}" download="{{fileName}}" >Download</a>
      </body>

JS

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

    myApp.controller('myController', ['$scope', function($scope) {
      $scope.emailValue = '[email protected]';
      $scope.nameValue = ""; 
    $scope.fileUrl = "http://thatfunnyblog.com/wp-content/uploads/2014/03/funny-videos-funny-cats-funny-ca.jpg";
    $scope.fileName = "funny-cat.jpeg";


      $scope.isEmailValid = function(){
        //replace this simplified dummy code with actual validation
        return $scope.emailValue.indexOf('@') !== -1;

      }

      $scope.isFormValid = function(){

      return   $scope.isEmailValid() &&  $scope.nameValue.length;

      }

      $scope.sendFormData = function(){

        console.log('sent that data');

      }

    }]);

CSS

a.disabled{ 
/*simulate disabled using css, since this property is nto supported on anchor element*/
color:gray;
pointer-events:none;

}

I need to activate all that logic only when my form in 'show' position. I mean I've got ng-click="show =! show" on my form and when it's showing it have to be validated if user wanna download file, but if form in 'hide' position it is not necessary to pass validation ( form actually is not visible at all ) and download button have to be just clickable. Hope I make myself clear
I can create separate question for that if you can help if you wish for one more acceptance :)

Rahul Malu · Accepted Answer · 2016-06-21 12:04:17Z

0

Try this:

$scope.sendFormDataIfVal = function() {    
  if(!$scope.validateEmail()) {
    // do not download and do not send
  }
else{
download and send
}
};

answered Jun 21, 2016 at 12:04

Rahul Malu

5662 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular few events on one button

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related