schema.ts

export interface ProductSchema {
    title: string;
    description: string;
    price: number;
}

// define a validation schema
export const productSchema = schema<ProductSchema>(ctx => {
    required(ctx.title);
    min(ctx.price, 0);
});

// use it in a component
@Component({
    template: `
        <div>
        <h2>Create Product</h2>
            <input [control]="form.title" placeholder="Title" />
            <input [control]="form.description" placeholder="Description" />
            <input type="number" [control]="form.price" placeholder="Price" />

            @if (form.price().errors().at(0)?.kind === 'min') {
                <p>Price must be positive.</p>
            }
        </div>
    `,
})
export class CreateProductComponent {
    product = signal<ProductSchema>({
        title: '',
        description: '',
        price: 0,
    });
    form = form(this.product, (ctx) => {
        apply(ctx, productSchema);
    });
}

// then another component
export class EditProductComponent {
    product = signal<ProductSchema>({
        title: '',
        description: '',
        price: 0,
    });
    form = form(this.product, (ctx) => {
        apply(ctx, productSchema);
    });
}