t-form

This component wraps other input components such as t-input-text. It provides validation and submission.

Learn more about forms.

Usage with Validation

First, create a TFormController with your options. Here, we're using input as the validationMode.

Then, create a controller for each field. A field controller allows you to handle validation and listen to change events. Note that other fields accept additional options based on the field.

The onValidate callback is called based on the validationMode you specify. When the value is invalid, return a message which will be displayed below the field, otherwise return nothing. You can also validate input value asynchronously.

To simplify input validation, use the @dija/tohama-validation. Take a rule from the package and provide it with the input value. The rule will return a boolean result.

import { defineComponent } from "vue";
import { TButton, TForm, TFormController, TInputText, TInputTextController } from "@dija/tohama-components";
import { email, required } from "@dija/tohama-validation";

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

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

    const onSubmit = async () => {
      const status = await form.submit();
      if (status === "valid") {
        // Handle input data `field.value`
      }
    };

    return () => (
      <TForm controller={form}>
        <TInputText
          controller={field}
          type="email"
          label="Email"
          placeholder="[email protected]"
          hint="Enter your email"
        />
        <TButton onClick={onSubmit}>Submit</TButton>
      </TForm>
    );
  },
});

Complex Forms

API

No options available

Popups

t-tooltip

Forms

t-input

Table of Contents