Add isValidating to field state #10657
Conversation
|
This branch is running in CodeSandbox. Use the links below to review this PR faster. |
|
Hey @bluebill1049, |
|
I did some adjustments to the formState validatingFields property (it uses a boolean instead of a counter now). The use of a counter here was wrong from the beginning I guess, because stapled validators shouldn't be possible. This was fixed with #10949. |
|
@bluebill1049 Any chance on getting a review on this? |
|
Thank you for your contributions! This Pull Request has been automatically marked as stale because it has not had any recent activity. It will be closed if no further activity occurs. Best, RHF Team ❤️ |
|
Hey @bluebill1049, I'm kindly asking again if there is anything we can do to make a review on this happen? |
|
Hey, Best, |
src/__tests__/useForm.test.tsx
Outdated
| let formState: any; | ||
| let getFieldState: any; |
There was a problem hiding this comment.
could we please remove any?
src/__tests__/useForm.test.tsx
Outdated
| let formState: any; | ||
| let getFieldState: any; |
src/__tests__/useForm.test.tsx
Outdated
| let getFieldState: any; | ||
| let formState: any; |
src/__tests__/useForm.test.tsx
Outdated
| let unregister: any; | ||
| let formState: any; |
src/logic/createFormControl.ts
Outdated
| const isAnyFieldValidating = Object.values( | ||
| _formState.validatingFields, | ||
| ).some((val) => val); | ||
| _proxyFormState.isValidating && | ||
| _subjects.state.next({ | ||
| isValidating: isAnyFieldValidating, | ||
| }); |
There was a problem hiding this comment.
i think this can be wrapped within the _proxyFormState check.
src/logic/createFormControl.ts
Outdated
| const isAnyFieldValidating = Object.values( | ||
| _formState.validatingFields, | ||
| ).some((val) => val); |
There was a problem hiding this comment.
utils/isEmptyObject.ts check will do.
There was a problem hiding this comment.
isEmptyObject is not doing what I want here. I extracted this to a util method called objectHasTruthyValue.
src/logic/createFormControl.ts
Outdated
| set(_formState.validatingFields, name, isValidating); | ||
| _subjects.state.next({ | ||
| isValidating: value, | ||
| validatingFields: _formState.validatingFields, | ||
| }); |
There was a problem hiding this comment.
can move to the _updateIsValidating function and wrapped within the proxy
There was a problem hiding this comment.
I refactored updateIsValidating and updateValidatingFields into one method and added the check for the proxyFormState.
src/logic/createFormControl.ts
Outdated
| fieldNames.forEach((name) => { | ||
| _updateValidatingFields(true, name); | ||
| }); |
There was a problem hiding this comment.
can we do that within the _updateValidatingFields?
There was a problem hiding this comment.
Refactored this so that _updateValidatingFields has an array of field names as its argument.
|
Nice thanks for the update! I will take a look at it again this weekend. 👍 |
|
Todo list
|
…k-form#10657) * Add isValidating to field state * Fix type tests for isValidating field state * Adjust bundlewatch maxSize * Fix api-extractor.md merge fail * Adjust formState validatingFields property * Adjust bundlewatch maxSize * Refactoring for isValidating fieldState * Fix multi async validators behavior * Remove unnecessary explicit type definition in isValidating test * Improve _updateIsValidating method * Add proxyFormState check to updateIsValidating method --------- Co-authored-by: Beier (Bill) <bluebill1049@hotmail.com>
close #8160
This PR includes the following:
Motivation behind this is that we want to display an indicator at individual form fields when they are validating.
There was already an issue where some people requested that feature a while ago: #5744
I also already created a branch in my fork of the documentation for this feature (react-hook-form/documentation@master...pbankonier:react-hook-form-documentation:feature/fieldState_isValidating)