SignalEnableController
Purpose
A controller that responds to SignalInputController notifications.
This controller removes the disabled attribute from an element when a value-change notification evaluates to
false against the expression given in whenValue evaluate to true, and adds disabled="true" when it evaluates to false.
This controller can be anywhere in the DOM tree and it will receive notifications from any SignalInputController with
the same nameValue as the nameValue of this controller.
Example Use Cases
- Turn off inputs in a form when another input has a certain value, See also: SignalVisibiityController to hide elements when they are not needed.
Actions
| Action | Purpose |
|---|---|
- | - |
Targets
| Target | Purpose | Default |
|---|---|---|
- | - | - |
Classes
| Class | Purpose | Default |
|---|---|---|
- | - | - |
Values
| Value | Type | Description | Default |
|---|---|---|---|
name | String | The name of the input value whose value to react to. This name should be the same as the nameValue of the SignalInputController you want to sync with. | - |
when | String | A simple expression which will be evaluated against the value received from SignalInputController. If the expression evaluates to false, the controller will add the disabled attribute to the controller element, otherwise it will remove it. | - |
Expressions follow the syntax of [operator][value] e.g. <3 or >=3 and can be combined with && and || operators.
Example expressions that can be used:
| Expression | Explanation |
|---|---|
default | will be shown when the value is empty |
>0 | |
>= 50 && <100 | |
==red | |
!=black and yellow | Everything that is not an operator is treated as a value. This is evaluated as inputValue != "black and yellow" |
==23 || ==25 |
Supported operators:
| Operator |
|---|
default evaluates to true when value is empty, e.g. "" |
== |
&& |
|| |
> |
>= |
< |
<= |
Note: Only simple expressions are supported.
Logical groupings e.g. (a || b) && c are not supported.
Variable bindings e.g. <=a are not supported.
You can only use only one type of logical concatenation at a time. i.e. >3 && ==5 && <10, or >3 || ==5 || <10. Expressions that mix the two, i.e. >3 || ==2 && <10 are not supported.
Security Note: This controller is designed to be safe. It does not violate any strong CSP policies, and it does NOT use eval().
The expressions are parsed as strings and predicate functions are created based on the presence or absence of recognised operators in the string, and the values that the SignalInputController broadcasts from the user are tested against the expression using
built-in JavaScript operators for each math operation.
Events
| Event | When | Dispatched on | event.detail | |
|---|---|---|---|---|
signal:enable:${nameValue} | When value of the input for nameValue changes, and the expression in whenValue evaluates to true against the new updated value | The controller root element | ||
element | the controller root element | |||
predicate | the expression the controller used to try and match the value | |||
value | the value that was received | |||
signal:disable:${nameValue} | When value of the input for nameValue changes, and the expression in whenValue evaluates to false against the new updated value | The controller root element | ||
element | the controller root element | |||
predicate | the expression the controller used to try and match the value | |||
value | the value that was received |
Side Effects
None
How to Use
<input type="number" name="foo" data-controller="signal-enable">
<div
data-controller="signal-enable bar"
data-signal-enable-name-value="foo"
data-signal-enable-when-value="=3 || =5"
>
<!-- the element will have the [disabled] attribute unless the value of input[name="foo"] is 3 or 5 -->
</div>