Forms API

Events

t-form component's controller provides events that allow you to listen to user input based on your requirements.

// Check your console logs

export default defineComponent({
  setup() {
    const form = TFormController.create({
      validationMode: "blur",
      onUpdate: ({ controller }) => {},
      onValid: ({ controller }) => {},
      onValidate: ({ controller }) => {},
    });

    const field = TInputTextController.create({
      onValidate: ({ value }) => {
        if (!required(value)) {
          return "Email is required";
        }
      },
    });

    return () => (
      <TForm controller={form}>
        <TInputText controller={field} label="Email" />
      </TForm>
    );
  },
});

onUpdate

This event is triggered when fields' values have been updated. It is considered an update based on the validationMode that you specify.

Note that this event is triggered even for invalid input.

onValid

This event is triggered when fields' values are valid.

Note that this event is only triggered when at least one field has a onValidate callback.

onValidate

This event is triggered when all input values changed and are valid. It is considered a change based on the validationMode that you specify.

You can use it to add validation at the form layer, synchronously or asynchronously.

References and Methods

t-form component's controller provides methods that allow you to manually trigger events.

Current Status

inactive

Current Messages

export default defineComponent({
  setup() {
    const form = TFormController.create({
      validationMode: "blur",
    });

    const field = TInputTextController.create({
      onValidate: ({ value }) => {
        if (!isRequired(value)) {
          return "Email is required";
        }
        if (!isEmail(value)) {
          return "Your input is not a valid email";
        }
      },
    });

    const currentStatus = computed(() => {
      return form.state.value.status;
    });
    const currentMessages = computed(() => {
      return form.state.value.messages.join(", ");
    });

    const onSubmit = async () => {
      const status = await form.submit();
      // Check your console logs
    };
    const onValidate = async () => {
      const status = await form.validate();
      // Check your console logs
    };

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

        <TButton onClick={onSubmit}>Submit</TButton>
        <TButton onClick={onValidate}>Validate</TButton>

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

        <TText>Current Messages</TText>
        <TText>{currentMessages.value ?? "-"}</TText>
      </>
    );
  },
});

References

state

Ref<TFormState>

A reactive object where the validation status and messages are stored.

interface TFormState {
  status: "valid" | "invalid" | "inactive";
  messages: string[];
}

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.

submit

(event?: Event | undefined) => Promise<TInputStatus>

Validates and submits the form, and returns its validation status.

Forms

Validation

Forms

Fields

Table of Contents