react-component / react-component/field-form
Propogate Fields state to Form
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1k
- Forks
- 286
- Avg merge
- 4d 16h
- Merged PRs (30d)
- 1
Description
What problem does this feature solve?
It allows to get the current state of form (touched, valid) without iteration among all fields.
There are multiple use-cases:
- block submit button until form is valid
- block application state if there are any invalid fields
- disable auto-save to prevent invalid data from saving on backend for editing
What does the proposed API look like?
I expect FormInstance to have methods/props isValid(are all fields valid), isTouched(is any field touched)
The similar approach is implemented among such libraries as
- Formik https://jaredpalmer.com/formik/docs/overview
- angular's ReactiveForms https://angular.io/api/forms/FormGroup
- react-final-forms https://final-form.org/docs/final-form/types/FormState
Proposed API:
I've used antd for example, if it's not ok I can update with plain rc-field-form
const FormComponent = () => {
const [form] = Form.useForm()
return <Form form={form}>
<Button htmlType="submit" disabled={!form.isValid()}>Ok</Button>
</Form>
}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the FormInstance and useForm API described in the issue, then trace how field touched and validation state are maintained. Define how isValid and isTouched should aggregate those states and confirm the behavior against the listed submit, application-state, and auto-save use cases. Done means FormInstance exposes both methods with documented, consistent results.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100