7

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

georgeawg
  • 48,608
  • 13
  • 72
  • 95
forgottofly
  • 2,729
  • 11
  • 51
  • 93

2 Answers2

10

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.

Arun Ghosh
  • 7,634
  • 1
  • 26
  • 38
0

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>
phuchoangmai
  • 305
  • 1
  • 5
  • 15