injectForm
Creates a reactive form store from a form configuration.
const form = injectForm<TSchema>(config);Generics
TSchemaextends FormSchema
Parameters
configFormConfig<TSchema>
Explanation
With injectForm you create the store of your form based on a Valibot schema. The store manages the form state and exposes it as Angular signals, so you can call properties like form.isValid() directly in your template — including in OnPush and zoneless components.
Like Angular's own inject, injectForm must be called in an injection context, which means in a field initializer or the constructor of your component. Pass the returned store to the [formischForm] directive to connect it to your <form> element.
Returns
formFormStore<TSchema>
Examples
The following examples show how injectForm can be used.
Basic form
import { Component } from '@angular/core';
import { FormischForm, injectForm } from '@formisch/angular';
import * as v from 'valibot';
const LoginSchema = v.object({
email: v.pipe(v.string(), v.email()),
password: v.pipe(v.string(), v.minLength(8)),
});
@Component({
selector: 'app-login',
imports: [FormischForm],
template: `
<form [formischForm]="loginForm" [formischSubmit]="handleSubmit">
<!-- Form fields -->
</form>
`,
})
export class LoginComponent {
readonly loginForm = injectForm({ schema: LoginSchema });
readonly handleSubmit = (output: v.InferOutput<typeof LoginSchema>) => {
console.log(output);
};
}Initial input
readonly profileForm = injectForm({
schema: ProfileSchema,
initialInput: {
name: 'Jane Doe',
email: 'jane@example.com',
},
});Validation timing
readonly signUpForm = injectForm({
schema: SignUpSchema,
validate: 'blur',
revalidate: 'input',
});Related
The following APIs can be combined with injectForm.