Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 809
forgottofly Avatar asked Aug 18 '16 04:08

forgottofly


People also ask

Why is Font Awesome not working?

Make sure you're using the latest and greatest by updating your CDN code reference, updating your Font Awesome package via npm, or downloading a fresh copy of Font Awesome. You can check with version an icon was added to on its detail page (e.g. question-circle was added in Verion 1 but last updated in 5.0.

How do I disable Font Awesome icon?

$("button[title='Aceptar']"). prop("disabled", true); where you can select the button by any of its property (first) and change property disabled.

Why is I tag used for Font Awesome?

I think the simple reason is that i is three characters shorter than span (resp. six including closing tag). This is what they say themselves: "Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct)."

What is difference between FA and FAS in Font Awesome?

fas - solid icons are usually filled with transparent outlines. far regular and fal light are similar. These icons are different than fas solid because they are mostly outlines and differ only in outline width. fal light icons have thinner outline compared to far regular.


1 Answers

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.

like image 98
Arun Ghosh Avatar answered Oct 24 '22 20:10

Arun Ghosh