Custom Field Factory

Now things begins to be fun, and closer to the real word! After all, you need to display errors and other thinks that your user needs.

// myFieldFactory.tsx
// ------------------
// Some extra fprops
interface MyFieldFactoryProps {
fLabel?: string
}
// Your awesome factory, with error displaying, label and requirement showing
function MyFieldFactory<TProps>(field: FieldFactoryArgs<TProps>) {
return FieldFactory<TProps, MyFieldFactoryProps>((fprops, props, fieldBindings, fielStatus) =>
<div>
<div>
{fprops.fLabel}
{fprops.fRequired && "*"}
</div>
<div>
{field(fprops, props, fieldBindings, fielStatus)}
</div>
<div>
{fielStatus.shouldDisplayErrors && fielStatus.errors}
</div>
</div>
)
}

Now, just use your factory on your components!

// componentField.tsx
// --------------
// Use it!
const ComponentField = MyFieldFactory<ComponentProps>((fprops, props, fieldBindings, fielStatus) =>
<Component {...props} {...fieldBindings} />
)