Fields
Validation
In this example, we're not using a t-form component. We're only using a single t-input-text component where we can check and listen to its validation status.
Notice that we've added a validationMode parameter to the controller to validate based on input event. Also, we've added a onValid callback that only triggers when the input is valid.
export default defineComponent({
setup() {
const field = TInputTextController.create({
validationMode: "input",
onValidate: ({ value }) => {
if (!required(value)) {
return "Email is required";
}
if (!email(value)) {
return "Your input is not a valid email";
}
},
onValid: ({ value }) => {
// Check your console logs
},
});
const onSubmit = async () => {
const status = await field.validate();
// Check your console logs
};
return () => (
<>
<TInputText controller={field} label="Email" />
<TButton onClick={onSubmit}>Submit</TButton>
</>
);
},
});
Initial Value
There are two ways to provide the input field with an initial value.
Model Value
In this example, we're proving the initial value via a ref. This allows you to update the input component after the component has already mounted.
const fetchFromServer = async () => {
await delayPromise(100);
return "[email protected]";
};
export default defineComponent({
setup() {
const email = ref<string>();
const field = TInputTextController.create({
value: email,
});
const onUpdateValue = async () => {
const response = await fetchFromServer();
email.value = response;
};
return () => (
<>
<TInputText controller={field} label="Email" />
<TButton onClick={onUpdateValue}>Update Value</TButton>
</>
);
},
});
Static Value
In this example, we're proving the initial value via a static value. This could be a value passed on as a prop from a parent component.
export default defineComponent({
setup() {
const field = TInputTextController.create({
value: "[email protected]",
});
return () => <TInputText controller={field} label="Email" />;
},
});