ng-disabled 不使用

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

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.

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>