Next #276

jaredpalmer · 2017-11-28T15:50:33Z

Sync field-level validations + Docs
Async field-level validations + Docs .
Document nested path syntax
Nested path syntax for deep updates (from Added nested values proposal prototype (#202) #207)
<FieldArray> (for now this is bundled with core), might move to formik-array pkg
- push
- pop
- remove
- insert
- move
- swap
- unshift
Document <FieldArray>
Upgrade to TS 2.6.2
Upgrade to React 16, Jest 21, Enzyme 3
Typechecking in test files during development

LinusU · 2017-12-05T17:54:59Z

I think field level validations seems awesome, I'm going to try it out on a form which adds fields dynamically which have been a huge pain currently for me 🍻

LinusU · 2017-12-05T18:38:50Z

src/Field.tsx

+      );
+    } else {
+      // Otherwise set the error
+      setFieldError(maybePromise);


Shouldn't this be setFieldError(name, maybePromise)? I think that this is causing an error for me...

Yeah, adding name here fixes this for me. The debugger also told me that setDeep was being called with my error message as the path so this seems to be the culprit. I opened #290 to fix it

jaredpalmer · 2017-12-05T19:04:51Z

Will push this when tests pass

LinusU · 2017-12-05T19:06:51Z

Thank you!

(tests seems to be passing now 😃)

LinusU · 2017-12-06T11:14:24Z

So, one thing to think about, which I'm not sure really how to solve, is that setting a validator on field will not rerun that validation if setFieldValue is used somewhere else 🤔

jaredpalmer · 2017-12-06T12:51:19Z

True true. Hmmmmm

* #283 Update to React 16, TypeScript 2.6.2 * Update Travis build to use npm instead of yarn * Move back to yarn (#301) * Fix travis script to use yarn.

brikou · 2017-12-12T08:59:23Z

@jaredpalmer this looks great!

brikou · 2017-12-12T13:51:55Z

@jaredpalmer it looks like when dealing nested array the required name should look like my_array.0.my_obj.my_prop. Yup validation uses instead my_array[0].my_obj.my_prop in default errors. I you follow this convention then yup validation would work out of the box, WDYT?

jaredpalmer · 2017-12-12T14:15:13Z

Yeah we need to add bracket support to dlv

brikou · 2017-12-12T14:39:34Z

src/FieldArray.tsx

+    };
+    const { render } = this.props;
+    return render
+      ? (render as any)({ ...arrayHelpers, form: this.context.formik })


form is missing in ts definition

ahh yes good looks

As you fix missing def, can you release a new alpha, as I'm living on the edge :D? Thank you so much!

@jaredpalmer thanks 👍

brikou · 2017-12-16T09:24:18Z

src/formik.tsx

@@ -639,7 +619,7 @@ function warnAboutMissingIdentifier({
 * Transform Yup ValidationError to a more usable object
 */
 export function yupToFormErrors<Values>(yupError: any): FormikErrors<Values> {


yup is now definitively typed :) ... take a look https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/yup/index.d.ts

Yah will do

* Fix FieldArray component prop * nit: test names [skip ci]

* feat(Field): Allow bracket path support * chore(deps): Add types for lodash.topath * chore(deps): yarn.lock

renchap · 2018-01-18T21:42:54Z

I just implemented an custom password input field with built-in strenght check and validation using the field-level validation and it works amazingly well, great work!

Have you considered the interaction between those field-level validations and the validationSchema prop? Currently you can not use both at the same time as errors are reset in validateYupSchema (https://github.com/jaredpalmer/formik/blob/next/src/formik.tsx#L343).
I think it would be better to merge errors from the fields and the one from the schema, but I am not sure on how this could work. Any ideas?

renchap · 2018-01-19T17:34:47Z

To add more details to my previous comment:
I have a validationSchema to ensure that email is required and a field-level validation on the password field.

When I add calls to console.log in my form render function, I see that Formik's errors is changed twice when I make a change to a field:

First update: {email: "email is a required field", password: "Password too weak"}
Second update (immediatly after): {email: "email is a required field"}

After some debugging, it seems related to runValidationSchema. When there are no schema errors, the errors are reset:

formik/src/formik.tsx

Lines 341 to 343 in 560a5e3

    
           validateYupSchema(values, schema).then( 
        
             () => { 
        
               this.setState({ errors: {} });

When there are schema errors, the errors are replaced by the one from the schema validation:

formik/src/formik.tsx

Lines 348 to 350 in 560a5e3

    
             (err: any) => 
        
               this.setState({ errors: yupToFormErrors(err), isSubmitting: false }) 
        
           );

They should be merged with errors coming from the fields (and eventually overriding them, depending on which one you want to prioritize).
I will try to write my own validation function based on runValidationSchema and Yup to see if it works.

renchap · 2018-01-19T18:16:30Z

And a related error, probably masked by the behaviour I described above previously.
Starting from a state.errors = { password: "invalid" }, calling setFieldError('password', undefined) results in state.errors = { password: undefined }.
A way to fix it would be to call delete on the property in setDeep (after cloning the object to not mutate the argument).

Please tell me if you prefer separate issues about these reports.

* Fix #280. Change the meaning of dirty and isValid * Lock in to path dep * Update tests for new definition of dirty * Update docs

bogdansoare · 2018-01-23T19:27:13Z

Merging the errors from field-level validations and validationSchema would be really useful

renchap · 2018-01-23T19:34:36Z

I digged a bit more into this, and the real issue is merging validation results when some (or all) of them are async (either from validationSchema, a validation function, or field-level validations).

I do not really know how to fix this properly, as you need to know when to merge (the new validation results that come in needs to be applied on top of the existing ones). Probably something like:

when we need to validate the form, reset the validation results, generate a "validation pass id"
when an async validation resolves, if its for the current "validation pass id", merge it into the existing results. Otherwise ignore it.

This is needed as we can have a new validation pass happening while some async results did not resolve yet (like if coming from a slow server-side process). As there is no way to cancel promises, we need to check if the results are current when it resolves.

I might have missed something here, I am still trying to grasp the whole codebase.

* feat(formik): Add onReset callback. * feat(formik): Use promise sniffing for onReset prop. This passes returned promise data to resetForm, allowing the promise to add new nextValues.

jaredpalmer · 2018-02-01T18:03:18Z

Okay folks, going to merge and cut a release.

LinusU · 2018-02-01T18:08:44Z

Great work 🎂

jaredpalmer added 4 commits November 28, 2017 10:42

Close #200. Add Field level validation

97e7b44

Regenerate doctoc

55565e4

Remove handleChangeValue completely

e9d0b10

v0.11.0-alpha.1

77a777d

LinusU reviewed Dec 5, 2017

View reviewed changes

Add missing name in call to setFieldError (#290)

2783e26

v0.11.0-alpha.2

725d6bd

jaredpalmer and others added 5 commits December 9, 2017 19:21

#281 Add array helpers MVP, update ts setup for better DX (#298)

74e7fb0

v0.11.0-alpha.3

5387fdb

Actually export FieldArray

e26eb40

v0.11.0-alpha.4

eaed294

Upgrade to React 16, TypeScript 2.6.2 (#300)

16509e5

* #283 Update to React 16, TypeScript 2.6.2 * Update Travis build to use npm instead of yarn * Move back to yarn (#301) * Fix travis script to use yarn.

brikou reviewed Dec 12, 2017

View reviewed changes

jaredpalmer added 2 commits December 12, 2017 21:00

Add form to TS types of FieldArray

d4fcb76

v0.11.0-beta.1

37a185f

brikou reviewed Dec 16, 2017

View reviewed changes

jaredpalmer and others added 5 commits December 29, 2017 10:35

Close #281 #155. Add docs about array helpers

45cd9c7

Add field array examples and update toc

1dea875

Fix unshift in FieldArray (#337)

fcf969d

Fix FieldArray component prop (#341)

548b296

* Fix FieldArray component prop * nit: test names [skip ci]

Allow bracket path support (#334)

560a5e3

* feat(Field): Allow bracket path support * chore(deps): Add types for lodash.topath * chore(deps): yarn.lock

Fix #280. Fix the definition dirty and isValid (#365)

343b9c9

* Fix #280. Change the meaning of dirty and isValid * Lock in to path dep * Update tests for new definition of dirty * Update docs

David Henley and others added 11 commits January 26, 2018 14:52

Fixed typo in FieldArray code (#380)

e65f9ca

Fix setDeep mutations with nested values (#373)

1b5a5b1

Merge branch 'master' into next

a21636a

Fix start task

7afcc43

Get rid of mutators file

67ef45f

v0.11.0-rc.1

f3492a6

#285 #122 Add example multistep / form wizard

7c8753e

#378 remove setFieldTouched from FieldArray

b32ebfd

v0.11.0-rc.2

66cf22a

#223 Fix checkbox validation error (again)

f076355

Add onReset callback. (#328)

5017053

* feat(formik): Add onReset callback. * feat(formik): Use promise sniffing for onReset prop. This passes returned promise data to resetForm, allowing the promise to add new nextValues.

jaredpalmer merged commit b34fe0a into master Feb 1, 2018

jaredpalmer deleted the next branch May 29, 2019 20:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next #276

Next #276

jaredpalmer commented Nov 28, 2017 •

edited

Loading

LinusU commented Dec 5, 2017

LinusU Dec 5, 2017

LinusU Dec 5, 2017

jaredpalmer commented Dec 5, 2017

LinusU commented Dec 5, 2017

LinusU commented Dec 6, 2017

jaredpalmer commented Dec 6, 2017

brikou commented Dec 12, 2017

brikou commented Dec 12, 2017

jaredpalmer commented Dec 12, 2017

brikou Dec 12, 2017

jaredpalmer Dec 13, 2017

brikou Dec 14, 2017

brikou Dec 14, 2017

brikou Dec 16, 2017

jaredpalmer Dec 16, 2017

renchap commented Jan 18, 2018

renchap commented Jan 19, 2018 •

edited

Loading

renchap commented Jan 19, 2018 •

edited

Loading

bogdansoare commented Jan 23, 2018

renchap commented Jan 23, 2018 •

edited

Loading

jaredpalmer commented Feb 1, 2018

LinusU commented Feb 1, 2018

Next #276

Next #276

Conversation

jaredpalmer commented Nov 28, 2017 • edited Loading

LinusU commented Dec 5, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jaredpalmer commented Dec 5, 2017

LinusU commented Dec 5, 2017

LinusU commented Dec 6, 2017

jaredpalmer commented Dec 6, 2017

brikou commented Dec 12, 2017

brikou commented Dec 12, 2017

jaredpalmer commented Dec 12, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

renchap commented Jan 18, 2018

renchap commented Jan 19, 2018 • edited Loading

renchap commented Jan 19, 2018 • edited Loading

bogdansoare commented Jan 23, 2018

renchap commented Jan 23, 2018 • edited Loading

jaredpalmer commented Feb 1, 2018

LinusU commented Feb 1, 2018

jaredpalmer commented Nov 28, 2017 •

edited

Loading

renchap commented Jan 19, 2018 •

edited

Loading

renchap commented Jan 19, 2018 •

edited

Loading

renchap commented Jan 23, 2018 •

edited

Loading