How to change input helper's class based on some condition in Ember

Question

How can the if condition clause be used in an input helper.

I tried:

{{input class="{{if errors.name "style-error"}}" }}

It caused building error.

the errors.name here is property from controller.

I reckon that it is the nested double curly braces causing the syntax error, but don't know how to achieve this conditional class declaration.

Answer 1

You can nest helpers using parenthesis:

{{input class=(if errors.name "style-error")}}

You should use this instead of the xxxBinding="..." syntax

---

You can use the concat helper to conditionally add multiple classes:

Conditionally add static + dynamic class:

{{input class=(if errors.name (concat "static-class " dynamicClass))}}

Conditionally add two dynamic classes:

{{input class=(if errors.name (concat dynamicClass1 " " dynamicClass2))}}

Add one class if the condition is true, another if it's false:

{{input class=(if errors.name "style-error" "style-success")}}

Add a class only when the condition is false:

{{input class=(unless errors.name "style-success")}}

Two conditions:

{{input class=(concat (if errors.name "name-error") " " (if errors.date "date-error"))}}

For more complex boolean arithmetic (e.g. and/or/not, equality and comparisons) you can use ember-truth-helpers