How do you make an link disabled using condition?

Question

I use angular 4 how can I disable the <a> element with a condition doing something like this [disabled]="!f.form.valid"

<a class="btn btn-primary btn-lg disabled" 
        href="https://mailtrap.io/inboxes/354346/messages" 
        target="_blank" (click)=f.form.reset() > Verify your Email Now</a>

If you suggest to just use the link button so I want to konw how to add target="_blank"

Can you please rephrase your question? Right now it doesn't make much sense. Your title asks how to disable an anchor (``), but then you ask about adding `target="_blank"`. Please clarify. — Heretic Monkey, Apr 27 '18 at 21:16
sorry, I just want one of them if i use the how i can disable it and if i use button how can i add the target — AVA, Apr 27 '18 at 21:17
@mplungjan - I think that the correct duplicate is [Angular2, what is the correct way to disable an anchor element?](https://stackoverflow.com/q/36985112/1009922). — ConnorsFan, Apr 27 '18 at 21:31

Luillyfe · Accepted Answer · 2018-04-27T21:34:12.507

1

Credits to styles to this excellent post in css-tricks.

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  pointer-events: none
  opacity: 0.5;
  text-decoration: none;
}

<a [ngClass]="{'isDisabled':condition}"
   class="btn btn-primary btn-lg disabled" 
   href="https://mailtrap.io/inboxes/354346/messages" 
   target="_blank" (click)=f.form.reset() > Verify your Email Now</a>

edited Apr 27 '18 at 21:34

answered Apr 27 '18 at 21:24

Luillyfe

6,183
8
36
46

That would just make it appear disabled. If you want to go only CSS add `pointer-events: none`. I would recommend stopping the event in JavaScript though. – Phix Apr 27 '18 at 21:28
@Phix You are absolute right. I missed that. – Luillyfe Apr 27 '18 at 21:33
This is still not the right solution as the link is still tabable. – Andurit Apr 14 '23 at 13:03

How do you make an link disabled using condition?

1 Answers1