ng-disabled not working with <i> tag using font-awesome

Question

I have created a plunk in which I want to validate a form that has a button created using font-awesome. The text field is required and I want to disabled the icon if no data is entered.But ng-disabled dosen't seem to support this functionality with font awesome icon. Has anyone faced this issue before.Please share your thoughts..

Please find the plunk here

Vitellin

For your reference: #30892358 – Obsequious

Answer 1

Place it inside a button and it should work:

    <button ng-disabled="testForm.$invalid" ng-click="$ctrl.checkIfClicked()">
      <i class="fa fa-floppy-o fa-2x"></i>
    </button>

You can format the style of the button in a way you want.

Chrono

Answer 2

In file css you can add

.disabled { cursor: not-allowed; }

And in html file, you change

<i class="fa fa-floppy-o fa-2x" ng-class="{disabled: testForm.$invalid}" aria-hidden="true" ng-click="$ctrl.checkIfClicked()"></i>

Shrove

but still you will be able to click the button.Right? – Vitellin

yes i tried and icon is clickable and also shows blocked icon on hover – Beheld

this solution we cant use – Beheld