Disable ui-sref based on a condition

Question

Can you tell me a way to disable the submit button, which changes to a new state by:

<a ui-sref="state">Submit</a>

The button should be enabled only when the form is valid.

ng-disabled with ui-sref does not work:

<form name="tickets">
  <button ng-disabled="!canSave()"><a ui-sref="view">Submit</a></button>
</form>

canSave function inside app.js being:

$scope.canSave = function(){
  return $scope.tickets.$dirty && $scope.tickets.$valid;
};

Answer 1

You could simply pair it with ng-click so that ng-disabled will work.

.controller('myCtrl', function($scope, $state) {     // so that you can call `$state.go()` from your ng-click     $scope.go = $state.go.bind($state); }) 

<!-- call `go()` and pass the state you want to go to --> <button ng-disabled="!canSave()" ng-click="go('view')>Submit</button> 

Here's a more fancy way using a custom directive:

angular.module('myApp', ['ui.router'])  .config(function($stateProvider) {    $stateProvider.state('home', {      url: '/'    });  })  .controller('myCtrl', function() {      })  .directive('uiSrefIf', function($compile) {    return {      scope: {        val: '@uiSrefVal',        if: '=uiSrefIf'      },      link: function($scope, $element, $attrs) {        $element.removeAttr('ui-sref-if');        $compile($element)($scope);                $scope.$watch('if', function(bool) {          if (bool) {            $element.attr('ui-sref', $scope.val);          } else {            $element.removeAttr('ui-sref');            $element.removeAttr('href');          }          $compile($element)($scope);        });      }    };  })  ;

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>    <div ng-app="myApp" ng-controller="myCtrl">    <form name="form">      <input ng-model="foo" ng-required="true">      <button ng-disabled="form.$invalid">        <a ui-sref-if="!form.$invalid" ui-sref-val="home">test</a>      </button>    </form>  </div>

Answer 2

There is a pure CSS solution for the problem.

Just set the pointer-events on your a tag to none:

button[disabled] > a {
    pointer-events: none;
}

Of course you should set a more accurate CSS selector to target just the buttons you want.