Hi,
Is it possible to use other components with FieldArray or de we have to use the Grid component?
I'm currently trying to use a custom component with FieldArray, but I'm having trouble binding the values to the form field.
1 Answer, 1 is accepted
Hello,
Yes, using other components is fully possible. The main requirement is that each value has to be bound using a Field component. This will tell the Form and FieldArray how to update the values.
For example in our Grid demo, we are rendering a Field component in each cell with a unique name:
export const NumberCell = (props) => {
const { parentField, editIndex } = React.useContext(FormGridEditContext);
const isInEdit = props.dataItem[FORM_DATA_INDEX] === editIndex;
return (
<td>
<Field
component={isInEdit ? NumericTextBoxWithValidation : DisplayValue}
name={`${parentField}[${props.dataItem[FORM_DATA_INDEX]}].${props.field}`}
validator={minValidator}
/>
</td>
);
};
export const NameCell = (props) => {
const { parentField, editIndex } = React.useContext(FormGridEditContext);
const isInEdit = props.dataItem[FORM_DATA_INDEX] === editIndex;
return (
<td>
<Field
component={isInEdit ? TextInputWithValidation : DisplayValue}
name={`${parentField}[${props.dataItem[FORM_DATA_INDEX]}].${props.field}`}
validator={requiredValidator}
/>
</td>
);
};
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.