react-hook-form 7.16.1 → 7.17.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md DELETED
@@ -1,1133 +0,0 @@
1
- # Changelog
2
-
3
- ## [7.16.0] - 2021-09-25
4
-
5
- ## Added
6
-
7
- - `register` allowed pass custom `onChange` and `onBlur`
8
-
9
- ```tsx
10
- <input
11
- type="text"
12
- {...register('test', {
13
- onChange: (e) => {},
14
- onBlur: (e) => {},
15
- })}
16
- />
17
- ```
18
-
19
- ## [7.15.0] - 2021-09-05
20
-
21
- ## Added
22
-
23
- - `useFieldArray` new method `replace()`
24
-
25
- ```tsx
26
- const { control } = useForm({
27
- defaultValues: {
28
- test: [{ value: 'lorem' }, { value: 'ipsum' }],
29
- },
30
- });
31
- const { fields, replace } = useFieldArray({
32
- control,
33
- name: 'test',
34
- });
35
-
36
- const handleFullyReplacement = (): void => {
37
- // remove old and set fully new values
38
- replace([{ value: 'dolor' }, { value: 'sit' }, { value: 'amet' }]);
39
- };
40
- ```
41
-
42
- ## [7.14.0] - 2021-08-27
43
-
44
- ## Added
45
-
46
- - `register` add dependent validation
47
-
48
- ```tsx
49
- const App = () => {
50
- const { register, getValues } = useForm();
51
-
52
- return (
53
- <form>
54
- <input
55
- {...register('firstName', {
56
- validate: (value) => {
57
- return getValues('lastName') === value;
58
- },
59
- })}
60
- />
61
- <input {...register('lastName', { deps: ['firstName'] })} /> // dependant validation
62
- </form>
63
- );
64
- };
65
- ```
66
-
67
- ## [7.13.0] - 2021-08-22
68
-
69
- ## Added
70
-
71
- `Trigger`
72
-
73
- - Trigger will enable object name trigger and field array name trigger
74
-
75
- ```tsx
76
- useFieldArray({ name: 'test' });
77
-
78
- trigger('name'); // will trigger the whole field array to validate
79
- ```
80
-
81
- `register`
82
-
83
- - added a `disabled` prop as an option to toggle input disable attribute
84
- - register will be able to seek input DOM reference through the `ref` callback
85
-
86
- ```tsx
87
- register('test', { disabled: true }) // will set value to undefined and pass disabled down to the input attribute
88
-
89
- <div {...register('test')}>
90
- <input name="test" /> // this input will be registered
91
- </div>
92
- ```
93
-
94
- `useWatch`
95
-
96
- - added `disabled` prop to toggle the state subscription.
97
-
98
- ```tsx
99
- useWatch({ disabled: true }); // you toggle the subscription
100
- ```
101
-
102
- `useFormState`
103
-
104
- - added `disabled` prop to toggle the state subscription.
105
-
106
- ```tsx
107
- useFormState({ disabled: true }); // you toggle the subscription
108
- ```
109
-
110
- `setValue`
111
-
112
- - allow set value for non-registered inputs include nested object and array field.
113
-
114
- ```tsx
115
- <input {...register('test.0.firstName')} />
116
-
117
- setValue('test', [{ firstName: 'bill' }, {firstName: 'kotaro}, {firstName: 'joris'}]) // this will works
118
- ```
119
-
120
- ## [7.12.0] - 2021-07-24
121
-
122
- ## Added
123
-
124
- - new `useForm` config `delayError`
125
-
126
- ```tsx
127
- useForm({
128
- delayError: 500, // delay error appear with 500ms
129
- });
130
- ```
131
-
132
- ## [7.11.0] - 2021-07-13
133
-
134
- ## Added
135
-
136
- - `update` method to update an field array inputs
137
-
138
- ```tsx
139
- const { update } = useFieldArray();
140
-
141
- update(0, data); // update an individual field array node
142
- ```
143
-
144
- ## [7.10.0] - 2021-07-02
145
-
146
- ## Changed
147
-
148
- - `defaultValue` is no longer a required prop for register input with `useFieldArray`
149
-
150
- ## [7.9.0] - 2021-06-19
151
-
152
- ## Added
153
-
154
- - new config at `useForm` to enabled native browser validation
155
-
156
- ```tsx
157
- const { register, handleSubmit } = useForm({
158
- shouldUseNativeValidation: true,
159
- });
160
- ```
161
-
162
- ## [7.8.5] - 2021-06-15
163
-
164
- ### Change
165
-
166
- - `useController` no longer access input `ref` except `focus` event for focus management
167
-
168
- ## [7.8.0] - 2021-06-5
169
-
170
- ### Added
171
-
172
- - `setValue` support `shouldTouch` to update formState touchFields
173
-
174
- ```tsx
175
- setValue('firstName', 'value', { shouldTouch: true });
176
- ```
177
-
178
- - `register` now accept `value` as option
179
-
180
- ```tsx
181
- register('firstName', { value: 'value' });
182
- ```
183
-
184
- ## Changed
185
-
186
- - `isValid` will initialise as `false`
187
-
188
- ## [7.7.1] - 2021-05-30
189
-
190
- ### Fixed
191
-
192
- - `shouldUnregister: false` should not shallow merge or register absent input fields from `defaultValues`
193
-
194
- ## [7.7.0] - 2021-05-29
195
-
196
- ### Added
197
-
198
- - `trigger` support focus with error input
199
-
200
- ```ts
201
- trigger('inputName', { shouldFocus: true });
202
- ```
203
-
204
- ### Changed
205
-
206
- - `handleSubmit` will `throw` error within the onSubmit callback
207
-
208
- ## [7.6.0] - 2021-05-15
209
-
210
- ### Changed
211
-
212
- - `useForm` will `register` missing inputs from `defaultValues`
213
-
214
- ```tsx
215
- const App = () => {
216
- const { register, handleSubmit } = useForm({
217
- defaultValues: {
218
- test: { firstName: 'bill', lastName: 'luo' },
219
- },
220
- });
221
-
222
- const onSubmit = (data) => {
223
- // missing registered input will be included
224
- console.log(data); // { test: { firstName: 'bill', lastName: 'luo' } }
225
- };
226
-
227
- return (
228
- <form onSubmit={handleSubmit(onSubmit)}>
229
- <input {...register('test.firstName')} />
230
- <button />
231
- </form>
232
- );
233
- };
234
- ```
235
-
236
- ## [7.5.0] - 2021-05-09
237
-
238
- ### Changed
239
-
240
- - `isSubmitSuccessful` will return false when `handleSubmit` callback failed with `Error` or `Promise` reject.
241
- - unmounted input will no longer get validated even with `shouldUnregister: false`
242
-
243
- ## [7.4.0] - 2021-05-04
244
-
245
- ### Added
246
-
247
- - new `name` prop for `useFormState` to subscribe to individual inputs.
248
-
249
- ```ts
250
- useFormState({
251
- name: 'inputName', // optional and can be array of inputs' name as well
252
- });
253
- ```
254
-
255
- ## [7.2.2] - 2021-04-21
256
-
257
- ### Changes
258
-
259
- - set `shouldUnregister` to `true` will not shallow merge `defaultValues`
260
-
261
- ## [7.2.0] - 2021-04-19
262
-
263
- ### Changes
264
-
265
- - `shouldUnregister` config to remove input value after unmount
266
-
267
- ```tsx
268
- // Global config (can't be overwrite)
269
- useForm({
270
- shouldUnregister: true // default to false
271
- })
272
-
273
- // Component/Hook level config (can not overwrites global config)
274
- register('test', {
275
- shouldUnregister: true // default to false
276
- })
277
-
278
- <Controller shouldUnregister={true} />
279
-
280
- useController({ shouldUnregister: true })
281
-
282
- useFieldArray({ shouldUnregister: true })
283
- ```
284
-
285
- ## [7.0.6] - 2021-04-12
286
-
287
- ### Changes
288
-
289
- - `register` will retrieve `onChange`'s target value when component'ref is not a valid input element.
290
-
291
- ## [7.0.0-rc.7] - 2021-03-28
292
-
293
- ### Changes
294
-
295
- - change type name from `RefCallbackHandler` to `UseFormRegisterReturn` for register callback's return
296
-
297
- ## [7.0.0-rc.7] - 2021-03-23
298
-
299
- ### Changes
300
-
301
- - `useFieldArray` will produce an empty array `[]` when no field is presented.
302
-
303
- ## [7.0.0-rc.1] - 2021-03-08
304
-
305
- ### Changes
306
-
307
- - `setValue` with field array will `register` all inputs before rendering.
308
-
309
- ## [7.0.0-beta.17] - 2021-03-03
310
-
311
- ### Changes
312
-
313
- - `append`, `prepend` and `insert` will `register` deeply nested inputs at `useFieldArray`.
314
-
315
- ## [7.0.0-beta.15] - 2021-02-27
316
-
317
- ### Changes
318
-
319
- - typescript array index restriction removed.
320
- - `append`, `prepend` and `insert` will `register` inputs during each action at `useFieldArray`.
321
-
322
- ## [7.0.0-beta.11] - 2021-02-20
323
-
324
- ### Changes
325
-
326
- - change `ArrayKey` type to `number | '${number}'`
327
-
328
- ## [7.0.0-beta.10] - 2021-02-19
329
-
330
- ### Changes
331
-
332
- - Change `useController`'s `meta` into `fieldState` and include `formState`, these change will be applied to `Controller` too.
333
-
334
- ```diff
335
- - const { field, meta } = useController({ control });
336
- + const { field, fieldState, formState } = useController({ control });
337
- ```
338
-
339
- ## [7.0.0-beta.9] - 2021-02-19
340
-
341
- ### Changes
342
-
343
- - typescript array index support is changed to `49` instead of `99`
344
-
345
- ## [7.0.0-beta.4] - 2021-02-08
346
-
347
- - **Breaking change:** `valueAs` will be run before the built-in validation and `resolver`
348
-
349
- ```diff
350
- - <input {...register('test', { validate: (data: string) => {}, valueAsNumber: true })} />
351
- + <input {...register('test', { validate: (data: number) => {}, valueAsNumber: true })} />
352
- ```
353
-
354
- ## [7.0.0-beta.1] - 2021-02-08
355
-
356
- ### Changes
357
-
358
- - `useWatch` will no longer required `defaultValue` for field Array
359
-
360
- ## [7.0.0-beta.0] - 2021-02-06
361
-
362
- ### Changes
363
-
364
- - **Breaking change:** shallow merge defaultValues with result (#4074)
365
-
366
- ```ts
367
- useForm({ defaultValues: { test: 'test' } });
368
-
369
- getValues(); // v6 will return {}
370
- getValues(); // v7 will return { test: 'test' }
371
- ```
372
-
373
- ## [v7.0.0-alpha.2] - 2021-02-04
374
-
375
- ### Changes
376
-
377
- - **Breaking change:** `setError`'s `shouldFocus` option has been moved into the third argument.
378
-
379
- ```diff
380
- - setError('test', { type: 'type', message: 'issue', shouldFocus: true })
381
- + setError('test', { type: 'type', message: 'issue' }, { shouldFocus: true })
382
- ```
383
-
384
- - **Breaking change:** type name changes:
385
-
386
- ```diff
387
- - UseFormMethods
388
- + UseFormReturn
389
- - UseFormOptions
390
- + UseFormProps
391
- - UseFieldArrayMethods
392
- + UseFieldArrayReturn
393
- - UseFieldArrayOptions
394
- + UseFieldArrayProps
395
- - UseControllerMethods
396
- + UseControllerReturn
397
- - UseControllerOptions
398
- + UseControllerProps
399
- - ArrayField
400
- + FieldArray
401
- ```
402
-
403
- ### Fixes
404
-
405
- - fix `setValue` with `Controller` and `reset` with `useFieldArray` issues: 4111 & 4108 (#4113)
406
-
407
- ## [v7.0.0-alpha.2] - 2021-02-02
408
-
409
- ### Changes
410
-
411
- - **Breaking change:** `setError`'s `shouldFocus` option has been moved to the third argument.
412
-
413
- ```diff
414
- - setError('test', { type: 'type', message: 'issue', shouldFocus: true })
415
- + setError('test', { type: 'type', message: 'issue' }, { shouldFocus: true })
416
- ```
417
-
418
- ### Fixes
419
-
420
- - fix #4078 issue with watch + mode: onChange
421
-
422
- ### Improvements
423
-
424
- - remove internal deep clone (#4088)
425
- - remove transformToNestObject (#4089)
426
-
427
- ## [v7.0.0-alpha.1] - 2021-02-01
428
-
429
- ### Changes
430
-
431
- - field name reference will be removed with `unregister` (#4010)
432
-
433
- - **Breaking change:** improve field array remove result and no longer remove field array value after unmount
434
-
435
- ```diff
436
- const { remove } = useFieldArray({ name: 'test' })
437
- remove();
438
- getValues(); // V6: result form value {}
439
- getValues(); // V7: result form value { test: [] }
440
- ```
441
-
442
- ### Improvements
443
-
444
- - change internal field names into `Set` (#4015)
445
- - improve `onChange` perf with `resolver (#4017)
446
- - improve field array name look up perf (#4030)
447
-
448
- ## [v7.0.0-alpha.0] - 2021-01-31
449
-
450
- ### Added
451
-
452
- - new custom hook `useFormState` (#3740)
453
-
454
- ```ts
455
- const { isDirty, errors } = useFormState();
456
- ```
457
-
458
- - `watch` support can subscribe to the entire form with a callback
459
-
460
- ```ts
461
- watch((data, { name, type }) => {
462
- console.log('formValue', data);
463
- console.log('name', name);
464
- console.log('type', type);
465
- });
466
- ```
467
-
468
- - `useController` includes new `isValidating` state (#3778)
469
- - `useController` includes new `error` state (#3921)
470
-
471
- ```ts
472
- const {
473
- meta: { error, isValidating },
474
- } = useController({ name: 'test' });
475
- ```
476
-
477
- - new `unregister` second argument (#3964)
478
-
479
- ```ts
480
- unregister('test', { keepDirty: true });
481
- ```
482
-
483
- - Resolver add `field` being validated (#3881)
484
-
485
- ```diff
486
- - resolver: (values: any, context?: object) => Promise<ResolverResult> | ResolverResult
487
- + resolver: (
488
- + values: any,
489
- + context?: object,
490
- + options: {
491
- + criteriaMode?: 'firstError' | 'all',
492
- + names?: string[],
493
- + fields: { [name]: field } // Support nested field
494
- + }
495
- + ) => Promise<ResolverResult> | ResolverResult
496
- ```
497
-
498
- - `useFieldArray` action can focus input by name and index
499
-
500
- ```ts
501
- append(object, config: { shouldDirty: boolean, focusIndex: number, focusName: string })
502
- insert(object, config: { shouldDirty: boolean, focusIndex: number, focusName: string })
503
- prepend(object, config: { shouldDirty: boolean, focusIndex: number, focusName: string })
504
- ```
505
-
506
- ### Changes
507
-
508
- - **Breaking change:** No longer support IE 11 support
509
-
510
- - **Breaking change:** `register` has been changed from register at `ref` to a function which needs to be spread as props.
511
-
512
- ```diff
513
- - <input ref={register, { required: true }} name="test" />
514
- + <input {...register('name', { required: true })} />
515
- + <TextInput {...register('name', { required: true })} />
516
- ```
517
-
518
- - **Breaking change:** `name` with array will only support dot syntax instead of brackets.
519
-
520
- ```
521
- - test[2].test
522
- + test.2.test
523
- ```
524
-
525
- - **Breaking change:** remove `as` prop at `Controller` and fix render prop consistency (#3732)
526
-
527
- ```diff
528
- - <Controller render={props => <input {...props} />} />
529
- + <Controller render={({ field }) => <input {...field} />} />
530
- ```
531
-
532
- - **Breaking change:** remove `errors` alias (#3737)
533
-
534
- ```diff
535
- - const { errors } = useForm();
536
- + const { formState: { errors } } = useForm();
537
- ```
538
-
539
- - **Breaking change:** improved `reset` second argument (#3905)
540
-
541
- ```diff
542
- - reset({}, { isDirty: true })
543
- + reset({}, { keepIsDirty: true })
544
- ```
545
-
546
- - **Breaking change:** change `touched` to `touchedFields` for consistency (#3923)
547
-
548
- ```diff
549
- - const { formState: { touched } } = useForm();
550
- + const { formState: { touchedFields }} = useForm();
551
- ```
552
-
553
- - **Breaking change:** `trigger` will no longer return validation result.
554
-
555
- ```diff
556
- - await trigger('test') // return true or false
557
- + trigger('test') // void
558
- ```
559
-
560
- - remove `isSubmitting` proxy (#4000)
561
-
562
- - input `register` will no longer be removed due to unmount, user will have to manually invoke `unregister`
563
-
564
- ### Improvements
565
-
566
- - `useWatch` internal mechanism improvement (#3754)
567
- - `Controller` and `useController` apply `useFormState` internally and improve performance (#3778)
568
- - `register` type support for input name (#3738)
569
- - `Controller` and `useCOntroller` type support for input name (#3738)
570
- - `useFieldArray` internal logic and data structure improvement (#3858)
571
- - improve `useFieldArray` internal fields update with subscription (#3943)
572
- - improve tests structure (#3916)
573
- - `useWatch` type improvement (#3931)
574
- - improve type support for nested field array with `const` (#3920)
575
- - improve `useFieldArray` internal type structure (#3986)
576
- - `MutationObserver` removed from `useForm`
577
-
578
- ## [6.15.0] - 2021-02-02
579
-
580
- ### Changed
581
-
582
- - radio input default selection will return `null` instead of empty string `''`
583
- - `valueAsNumber` with empty input will return `NaN` instead of `0`
584
-
585
- ## [6.14.0] - 2020-12-31
586
-
587
- ### Changed
588
-
589
- - `setValue` without shouldUnregister:false will no longer deep clone its value instead with shallow clone
590
-
591
- ### Added
592
-
593
- - new formState `isValidating`, this will set to `true` during validation.
594
-
595
- ```ts
596
- const {
597
- formState: { isValidating },
598
- } = useForm();
599
- ```
600
-
601
- ## [6.12.0] - 2020-12-12
602
-
603
- ### Changed
604
-
605
- - When invoking `reset({ value })` value will be shallow clone value object which you have supplied instead of deepClone.
606
-
607
- ```tsx
608
- // ❌ avoid the following with deep nested default values
609
- const defaultValues = { object: { deepNest: { file: new File() } } };
610
- useForm({ defaultValues });
611
- reset(defaultValues); // share the same reference
612
-
613
- // ✅ it's safer with the following, as we only doing shallow clone with defaultValues
614
- useForm({ deepNest: { file: new File() } });
615
- reset({ deepNest: { file: new File() } });
616
- ```
617
-
618
- ### Added
619
-
620
- - New custom hook `useController`: This custom hook is what powers Controller, and shares the same props and methods as Controller. It's useful to create reusable Controlled input, while Controller is the flexible option to drop into your page or form.
621
-
622
- ```tsx
623
- import React from 'react';
624
- import { TextField } from '@material-ui/core';
625
- import { useController } from 'react-hook-form';
626
-
627
- function Input({ control, name }) {
628
- const {
629
- field: { ref, ...inputProps },
630
- meta: { invalid, isTouched, isDirty },
631
- } = useController({
632
- name,
633
- control,
634
- rules: { required: true },
635
- defaultValue: '',
636
- });
637
-
638
- return <TextField {...inputProps} inputRef={ref} />;
639
- }
640
- ```
641
-
642
- ## [6.12.0] - 2020-11-28
643
-
644
- ### Changed
645
-
646
- - `useWatch` will retrieve the latest value from `reset(data)` instead of return `defaultValue`
647
-
648
- ```tsx
649
- useWatch({
650
- name: 'test',
651
- defaultValue: 'data', // this value will only show on the initial render
652
- });
653
- ```
654
-
655
- - TS: name changed from `ValidationRules` to `RegisterOptions` due to valueAs functionality included as `register` function.
656
-
657
- ### Added
658
-
659
- - `register` function with additional options to transform value
660
-
661
- - `valueAsDate`
662
- - `valueAsNumber`
663
- - `setValue`
664
-
665
- ```tsx
666
- register({
667
- valueAsNumber: true,
668
- });
669
-
670
- register({
671
- valueAsNumber: true,
672
- });
673
-
674
- register({
675
- setValueAs: (value) => value,
676
- });
677
- ```
678
-
679
- ### Added
680
-
681
- ## [6.11.0] - 2020-11-07
682
-
683
- ### Changed
684
-
685
- - `defaultValues` is **required** to measure `isDirty`, keep a single source of truth to avoid multiple issues raised around `isDirty`
686
- - when `watch` with `useFieldArray`, `fields` object is no longer required as defaultValue
687
-
688
- ```diff
689
- - watch('fieldArray', fields);
690
- + watch('fieldArray');
691
- ```
692
-
693
- ## [6.10.0] - 2020-10-31
694
-
695
- ### Added
696
-
697
- - `Controller` will have an extra `ref` props to improve DX in terms of focus management.
698
-
699
- ```tsx
700
- <Controller
701
- name="test"
702
- render={(props) => {
703
- return (
704
- <input
705
- value={props.value}
706
- onChange={props.onChange}
707
- ref={props.ref} // you can assign ref now without the use of `onFocus`
708
- />
709
- );
710
- }}
711
- />
712
-
713
- // focus will work correct without the `onFocus` prop
714
- <Controller name="test" as={<input />} />
715
- ```
716
-
717
- ### Changed
718
-
719
- - `resolver` with group error object will no longer need with `trigger` to show and clear error. This minor version made hook form look at parent error node to detect if there is any group error to show and hide.
720
-
721
- ```tsx
722
- const schema = z.object({
723
- items: z.array(z.boolean()).refine((items) => items.some((item) => item)),
724
- });
725
-
726
- {
727
- items.map((flag, index) => (
728
- <input
729
- type="checkbox"
730
- defaultChecked={false}
731
- // onChange={() => trigger("items")} now can be removed
732
- ref={register}
733
- name={`items.${index}`}
734
- />
735
- ));
736
- }
737
- ```
738
-
739
- ## [6.9.0] - 2020-10-3
740
-
741
- ### Changed
742
-
743
- - with shouldUnregister set to false, empty Field Array will default [] as submission result.
744
-
745
- ```tsx
746
- const { handleSubmit } = useForm({
747
- shouldUnregister: false,
748
- });
749
-
750
- useFieldArray({
751
- name: 'test',
752
- });
753
-
754
- handleSubmit((data) => {
755
- // shouldUnregister: false
756
- // result: { data: {test: []} }
757
- // shouldUnregister: true
758
- // result: {}
759
- });
760
- ```
761
-
762
- ## [6.8.4] - 2020-09-22
763
-
764
- ### Changed
765
-
766
- - when input unmounts `touched` and `dirtyFields` will no longer get removed from `formState` (shouldUnregister: true).
767
-
768
- ## [6.8.0] - 2020-09-09
769
-
770
- ### Added
771
-
772
- - new formState `isSubmitSuccessful` to indicate successful submission
773
- - `setError` now support focus on the actual input
774
-
775
- ```typescript jsx
776
- setError('test', { message: 'This is required', shouldFocus: true });
777
- ```
778
-
779
- ### Changed
780
-
781
- - with `shouldUnregister:false` `defaultValues` data will be part of the submission data
782
- - with `shouldUnregister:false` conditional field is going to work with `useFieldArray`
783
- - `setValue` now support `useFieldArray`
784
-
785
- ```diff
786
- - setValue('test', 'data')
787
- + setValue('test', [{ test: '123' }]) // make it work for useFieldArray and target a field array key
788
- ```
789
-
790
- - remove `exact` config at clearErrors
791
-
792
- ```diff
793
- - clearErrors('test', { exact: false })
794
- + clearErrors('test') // does it automatically in the lib
795
- ```
796
-
797
- ## [6.7.0] - 2020-08-30
798
-
799
- ### Added
800
-
801
- - `clearError` have second option argument for clear errors which are exact or key name
802
-
803
- ```ts
804
- register('test.firstName', { required: true });
805
- register('test.lastName', { required: true });
806
- clearErrors('test', { exact: false }); // will clear both errors from test.firstName and test.lastName
807
- clearErrors('test.firstName'); // for clear single input error
808
- ```
809
-
810
- ## [6.6.0] - 2020-08-28
811
-
812
- ### Changed
813
-
814
- - all types from this lib has been exported. **Important:** only documented type: https://react-hook-form.com/ts will avoid breaking change.
815
-
816
- ## [6.5.0] - 2020-08-23
817
-
818
- ### Changed
819
-
820
- - `errors` is also part of `formState` object
821
- - `disabled` input will not be part of the submission data by following the [HTML standard](https://html.spec.whatwg.org/multipage/forms.html#constructing-the-form-data-set)
822
-
823
- ## [6.4.0] - 2020-08-15
824
-
825
- ### Added
826
-
827
- - `Controller`'s `render` prop will pass down `name` prop
828
- - `handleSubmit` take a second callback for errors callback
829
- - new mode `onTouched` will only trigger validation after inputs are touched
830
-
831
- ### Changed
832
-
833
- - `register` no longer compare `ref` difference with React Native
834
-
835
- ## [6.3.2] - 2020-08-11
836
-
837
- ### Changed
838
-
839
- - IE 11 version will be required to install `@babel/runtime-corejs3` as dependency at your own project
840
-
841
- ## [6.3.0] - 2020-08-8
842
-
843
- ### Changed
844
-
845
- - `defaultValue` is become **required** for `useFieldArray` at each input
846
-
847
- ## [6.2.0] - 2020-07-30
848
-
849
- ### Changed
850
-
851
- - revert `getValues` will return default values before inputs registration
852
-
853
- ## [6.1.0] - 2020-07-26
854
-
855
- ### Changed
856
-
857
- - `resolver` supports both async and sync
858
- - `getValues` will return default values before inputs registration
859
-
860
- ## [6.0.7] - 2020-07-17
861
-
862
- ### Added
863
-
864
- - export `ArrayField` type
865
-
866
- ### Changed
867
-
868
- - error message will support array of messages for specific type
869
-
870
- ```diff
871
- - export type ValidateResult = Message | boolean | undefined;
872
- + export type ValidateResult = Message | Message[] | boolean | undefined;
873
- ```
874
-
875
- ## [6.0.3] - 2020-07-10
876
-
877
- ### Changed
878
-
879
- - Controller `onFocus` works with React Native
880
- - Controller stop producing `checked` prop by boolean `value`
881
-
882
- ## [6.0.2] - 2020-07-8
883
-
884
- ### Added
885
-
886
- - export `UseFormOptions`, `UseFieldArrayOptions`, `FieldError`, `Field` and `Mode` type
887
-
888
- ## [6.0.1] - 2020-07-3
889
-
890
- ### Added
891
-
892
- - export `ValidationRules` type
893
-
894
- ## [6.0.0] - 2020-07-1
895
-
896
- ### Added
897
-
898
- - config for `shouldUnregister` which allow input to be persist even after unmount
899
-
900
- ```typescript
901
- useForm({
902
- shouldUnregister: false, // unmount input state will be remained
903
- });
904
- ```
905
-
906
- - auto focus with useFieldArray
907
-
908
- ```ts
909
- append({}, (autoFocus = true));
910
- prepend({}, (autoFocus = true));
911
- insert({}, (autoFocus = true));
912
- ```
913
-
914
- - TS: NestedValue
915
-
916
- ```tsx
917
- import { useForm, NestedValue } from 'react-hook-form';
918
-
919
- type FormValues = {
920
- key1: string;
921
- key2: number;
922
- key3: NestedValue<{
923
- key1: string;
924
- key2: number;
925
- }>;
926
- key4: NestedValue<string[]>;
927
- };
928
-
929
- const { errors } = useForm<FormValues>();
930
-
931
- errors?.key1?.message; // no type error
932
- errors?.key2?.message; // no type error
933
- errors?.key3?.message; // no type error
934
- errors?.key4?.message; // no type error
935
- ```
936
-
937
- - `useWatch` (new) subscribe to registered inputs.
938
-
939
- ```tsx
940
- <input name="test" ref={register} />;
941
-
942
- function IsolateReRender() {
943
- const { state } = useWatch({
944
- name: 'test',
945
- control,
946
- defaultValue: 'default',
947
- });
948
-
949
- return <div>{state}</div>;
950
- }
951
- ```
952
-
953
- - `getValues()` support array of field names
954
-
955
- ```typescript jsx
956
- getValues(['test', 'test1']); // { test: 'test', test1: 'test1' }
957
- ```
958
-
959
- - `useForm({ mode: 'all' })` support all validation
960
-
961
- ### Changed
962
-
963
- - rename `validationResolver` to `resolver`
964
- - rename `validationContext` to `context`
965
- - rename `validateCriteriaMode` to `criteriaMode`
966
- - rename `triggerValidation` to `trigger`
967
- - rename `clearError` to `clearErrors`
968
- - rename `FormContext` to `FormProvider`
969
- - rename `dirty` to `isDirty`
970
- - `dirtyFields` change type from `Set` to `Object`
971
-
972
- - Controller with render props API, and removed the following props:
973
- - onChange
974
- - onChangeName
975
- - onBlur
976
- - onBlurName
977
- - valueName
978
-
979
- ```diff
980
- -<Controller
981
- - as={CustomInput}
982
- - valueName="textValue"
983
- - onChangeName="onTextChange"
984
- - control={control}
985
- - name="test"
986
- -/>
987
- +<Controller
988
- + render={({ onChange, onBlur, value }) => (
989
- + <CustomInput onTextChange={onChange} onBlur={onBlur} textValue={value} />
990
- + )}
991
- + control={control}
992
- + name="test"
993
- +/>
994
- ```
995
-
996
- - `setError` will focus one error at a time and remove confusing set multiple errors, behavior change.
997
- - setError will persis an error if it's not part of the form, which requires manual remove with clearError
998
- - setError error will be removed by validation rules, rules always take over errors
999
-
1000
- ```diff
1001
- - setError('test', 'test', 'test')
1002
- + setError('test', { type: 'test', message: 'bill'})
1003
- ```
1004
-
1005
- - `setValue` will focus on input at a time
1006
-
1007
- ```diff
1008
- setValue('test', 'value', { shouldValidate: false, shouldDirty: false })
1009
- ```
1010
-
1011
- ### Removed
1012
-
1013
- - remove `validationSchema` and embrace validation `resolver`
1014
- - remove `nest` option for `watch` & `getValues`, so data return from both methods will be in FormValues shape.
1015
-
1016
- ```diff
1017
- -getValues({ nest: true }); // { test: { data: 'test' }}
1018
- -watch({ nest: true }); // { test: { data: 'test' }}
1019
- +getValues(); // { test: { data: 'test' }}
1020
- +watch(); // { test: { data: 'test' }}
1021
- ```
1022
-
1023
- ## [5.0.0] - 2020-03-07
1024
-
1025
- ### Breaking Change
1026
-
1027
- - `Controller`: onChange will only evaluate payload as event like object. eg: react-select will no longer need the extra `onChange` method at `Controller`.
1028
-
1029
- ```diff
1030
- import { TextInput } from 'react-native';
1031
-
1032
- -<Controller
1033
- - as={<TextInput style={{ borderWidth: 2, borderColor: 'black'}} />}
1034
- - name="text"
1035
- - control={args => ({
1036
- - value: args[0].nativeEvent.text,
1037
- - })}
1038
- - onChange={onChange}
1039
- -/>
1040
- +<Controller
1041
- + as={<TextInput style={{ borderWidth: 2, borderColor: 'black'}} />}
1042
- + name="text"
1043
- + control={args => args[0].nativeEvent.text}
1044
- + onChange={onChange}
1045
- +/>
1046
- ```
1047
-
1048
- ## [4.0.0] - 2019-12-24
1049
-
1050
- ### Breaking changes
1051
-
1052
- - improve module **exports**:
1053
-
1054
- ```tsx
1055
- import { useForm } from 'react-hook-form';
1056
- ```
1057
-
1058
- - nested `errors` object and better typescript support
1059
-
1060
- ```tsx
1061
- type form = {
1062
- yourDetail: {
1063
- firstName: string;
1064
- };
1065
- };
1066
-
1067
- errors?.yourDetail?.firstName;
1068
- ```
1069
-
1070
- - triggerValidation argument change from `Object`, `Object[]` to `String`, `String[]`
1071
-
1072
- ```tsx
1073
- triggerValidation('firstName');
1074
- triggerValidation(['firstName', 'lastName']);
1075
- ```
1076
-
1077
- - watch support `{ nest: boolean }`
1078
-
1079
- ```tsx
1080
- watch(); // { 'test.firstName': 'bill' }
1081
- watch({ nest: true }); // { test: { firstName: 'bill' } }
1082
- ```
1083
-
1084
- - improve custom `register`
1085
-
1086
- ```tsx
1087
- register('test', { required: true });
1088
- ```
1089
-
1090
- - setError` support nested object
1091
-
1092
- ```tsx
1093
- setError('yourDetail.firstName', 'test');
1094
- errors.yourDetails.firstName;
1095
- ```
1096
-
1097
- - `handleSubmit` no longer rerun array inputs contains `undefined` or `null`
1098
-
1099
- ### Added
1100
-
1101
- - move `RHFInput` into the main repo and rename it to `Controller`
1102
-
1103
- ```tsx
1104
- <Controller control={control} name="test" />
1105
- ```
1106
-
1107
- ### Removed
1108
-
1109
- - `validationSchemaOption`: hardly anyone want to use validation with abort early, or change the config.
1110
-
1111
- - native validation: hardly anyone used this feature. https://react-hook-form.com/api/#Browserbuiltinvalidation
1112
-
1113
- ## [3.0.0] - 2019-04-21
1114
-
1115
- ### Added
1116
-
1117
- React Hook Form return a new `formState: Object` which contain the following information
1118
-
1119
- - `dirty`: when user interactive any fields
1120
- - `touched`: what are the fields have interacted
1121
- - `isSubmitted`: whether the form have been triggered with submitting
1122
-
1123
- ```tsx
1124
- const {
1125
- formState: { dirty, touched, isSubmitted },
1126
- } = useForm();
1127
- ```
1128
-
1129
- ## [2.0.0] - 2019-03-29
1130
-
1131
- ### Added
1132
-
1133
- - support `ref={register}` instead of only `ref={register()}`