Fields API

Events

t-input components' controllers provide events that allow you to listen to user input based on your requirements.

// Check your console logs

<TInputText
  label="Email"
  controller={TInputTextController.create({
    validationMode: "blur",
    onUpdate: ({ controller }) => {},
    onInput: ({ controller }) => {},
    onBlur: ({ controller }) => {},
    onClick: ({ controller }) => {},
    onValid: ({ controller }) => {},
    onValidate: ({ controller }) => {},
  })}
/>

onUpdate

This event is triggered when the value has been updated. It is considered an update based on the validationMode that you specify.

Note that this event is triggered even for invalid input.

onInput

This event is triggered directly when the value has changed. Note that not all input components support this event.

onBlur

This event is triggered when the input field losses focus.

onClick

This event is triggered when the input field is clicked.

onValid

This event is triggered when the input value is valid.

Note that this event is only triggered when you've provided a onValidate callback.

onValidate

This event is triggered when the input value has changed. It is considered a change based on the validationMode that you specify.

Use it to validate the input value synchronously or asynchronously. If the value is invalid, return a message which will be displayed below the field. Otherwise, return nothing which will be considered a valid value.

References and Methods

t-input components' controllers provide methods that allow you to manually trigger events and control the value.

Current Value

[email protected]

Current Status

inactive

Current Message

-

export default defineComponent({
  setup() {
    const field = TInputTextController.create({
      value: "[email protected]",
      onValidate: ({ controller }) => {
        if (!required(controller.value)) {
          return "Email is required";
        }
      },
    });

    const currentValue = computed(() => {
      return field.state.value.data;
    });
    const currentStatus = computed(() => {
      return field.state.value.status;
    });
    const currentMessage = computed(() => {
      return field.state.value.message;
    });

    const onChangeValue = () => {
      field.update("[email protected]");
    };
    const onClearValue = () => {
      field.update(undefined);
    };
    const onValidate = async () => {
      const status = await field.validate();
      // Check your console logs
    };

    return () => (
      <>
        <TInputText controller={field} label="Email" />

        <TButton onClick={onChangeValue}>Change Value</TButton>
        <TButton onClick={onClearValue}>Clear Value</TButton>
        <TButton onClick={onValidate}>Validate</TButton>

        <TText>Current Value</TText>
        <TText>{currentValue.value ?? "-"}</TText>

        <TText>Current Status</TText>
        <TText>{currentStatus.value ?? "-"}</TText>

        <TText>Current Status</TText>
        <TText>{currentMessage.value ?? "-"}</TText>
      </>
    );
  },
});

References

uid

string

A unique identifier for this field.

value

T | undefined

The non-reactive current value.

state

Ref<TInputState>

A reactive object where the value (data), validation status and message are stored.

interface TInputState {
  data: T | undefined;
  status: "valid" | "invalid" | "inactive";
  message: string | undefined;
}

fields

TInputController<unknown>[]

Hosts a list of child t-input controllers. Use it to access fields values and state form the form controller.

Methods

validate

() => Promise<TInputStatus>

Validates the form and returns its validation status.

Forms

Fields

Docs

Components

Table of Contents