DataEffect JS

Use the DataEffect component to execute side effects when the value of the Data... components group changes. This component extends the DataBind component, so it inherits from its API.

Usage

index.html

<div data-component="DataScope" data-option-group="validation">
  <!-- "message" is the scoped key for both components. -->
  <input
    name="message"
    type="text"
    data-component="DataModel DataEffect"
    data-option-effect="target.setCustomValidity(value.length > 10 ? 'Use 10 characters or fewer.' : '')" />
</div>

app.js

import { registerComponent } from '@studiometa/js-toolkit';
import { DataEffect, DataModel, DataScope } from '@studiometa/ui';

registerComponent(DataScope);
registerComponent(DataModel);
registerComponent(DataEffect);