How should the Select all functionality be implemented using the array?
#1132
-
ContextI have a list of items with checkboxes and the "Select all" option in my form: Here's the form definition: const form = useForm<CopyConfig>({
defaultValues: { targetCourseIds: [] },
validators: {
onChange: ({ value }) => {
const { targetCourseIds } = value;
if (targetCourseIds.length === 0) {
return 'At least one course must be selected';
}
}
},
onSubmit: ({ value }) => onSubmit(value)
});const copyTargetIds = useMemo(() => copyTargets.map(({ id }) => id), [copyTargets]);
const allCourseIdsChecked = useStore(
form.store,
({ values: { targetCourseIds } }) => targetCourseIds.length === copyTargetIds.length
);const handleCourseIdsChange = useCallback(
async (event: ChangeEvent<HTMLInputElement>) => {
const { name, checked } = event.target;
if (name === 'all') {
form.setFieldValue('targetCourseIds', checked ? copyTargetIds : []);
return;
}
const courseId = Number(name);
if (checked) {
form.pushFieldValue('targetCourseIds', courseId);
} else {
await form.removeFieldValue(
'targetCourseIds',
form.getFieldValue('targetCourseIds').indexOf(courseId)
);
}
},
[copyTargetIds, form]
);<form.Field name="targetCourseIds">
{(field) => (
<FormControl component="fieldset" variant="standard" css={styles.fieldset}>
<FormLabel component="legend" focused={false} css={styles.legend}>
Which of your other sections would you like to copy these notes to?
</FormLabel>
<FormGroup css={styles.group}>
<FormControlLabel
label="Select all"
control={
<Checkbox
name="all"
checked={allCourseIdsChecked}
disableRipple
css={styles.checkbox}
onChange={handleCourseIdsChange}
/>
}
/>
{copyTargets.map(({ id, label }) => (
<FormControlLabel
key={id}
label={label}
control={
<Checkbox
name={`${id}`}
checked={field.state.value.includes(id)}
disableRipple
css={styles.checkbox}
onChange={handleCourseIdsChange}
/>
}
/>
))}
</FormGroup>
</FormControl>
)}
</form.Field>IssueWhen I check the What is an optimal way to apply the bulk updates to the field that will also trigger the
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
UPD: I found that the Therefore, the if (name === 'all') {
form.setFieldValue('targetCourseIds', checked ? copyTargetIds : []);
+ await form.validateField('targetCourseIds', 'change');
return;
}That forces the validation to run and properly change the |
Beta Was this translation helpful? Give feedback.
UPD: I found that the
form/fieldcan be manually validated using the following methods:Therefore, the
handleCourseIdsChangecan be updated in the following way:if (name === 'all') { form.setFieldValue('targetCourseIds', checked ? copyTargetIds : []); + await form.validateField('targetCourseIds', 'change'); return; }That forces the validation to run and properly change the
canSubmitvalue!