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

admin管理员组

文章数量:1347693

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

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

• javascript
• angularjs
• font-awesome
• angularjs-ng-disabled

Share Improve this question Follow edited Jun 22, 2018 at 16:27 georgeawg 49k1313 gold badges7777 silver badges9898 bronze badges asked Aug 18, 2016 at 4:09 forgottoflyforgottofly 2,7291212 gold badges5454 silver badges9696 bronze badges 1

• For your reference: stackoverflow./questions/30891858/… – Gopinath Shiva Commented Aug 18, 2016 at 4:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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.

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>

本文标签： javascriptngdisabled not working with ltigt tag using fontawesomeStack Overflow