Angular 2 ternary if to add disabled to an input [duplicate]

Question

How may I add disabled to an input if a condition is met?

What I have today: <input class="previous" [attr.disabled] = "active === 1 ? 'disabled' : ''">

But this adds disabled="disabled" and I want only disabled.

So what I need is: <input class="previous" disabled> if the condition is met.

Günter Zöchbauer · Accepted Answer · 2017-01-16 15:45:24Z

59

An attribute can be removed by passing the value null

[attr.disabled] = "active === 1 ? 'disabled' : null">

answered Jan 16, 2017 at 15:45

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

William Over a year ago

Sweet, it still prints disabled="disabled" but it solved my problem because when it's false, it will print nothing instead of disabled=""

Stefan Svrkota Over a year ago

@William If you want disabled to be reflected in DOM just like disabled and not disabled="disabled", pass boolean value to disabled attribute: [disabled]="active === 1 ? true : false"

Günter Zöchbauer Over a year ago

@stefan-svrkota removing the attribute or having the value set to false is quite a difference. Also the question was about removing.

Sam Over a year ago

the question is talking about how to disable an input conditionally. while changing the attr appears acceptable. a better solution may be as follows, you can use something like below in the html <input [disabled]="shouldBeDisabled"> and then in the TS get shouldBeDisabled():boolean { return {condition here as boolean}; }

Collectives™ on Stack Overflow

Angular 2 ternary if to add disabled to an input [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related