1
1
# API
2
2
3
3
- [ Formsy] ( #formsy )
4
+ - [ getModel()] ( #getModel )
4
5
- [ mapping] ( #mapping )
5
- - [ validationErrors] ( #validationErrors )
6
+ - [ onChange()] ( #onChange )
7
+ - [ onInvalid()] ( #onInvalid )
8
+ - [ onInvalidSubmit()] ( #onInvalidsubmit )
6
9
- [ onSubmit()] ( #onSubmit )
7
10
- [ onValid()] ( #onValid )
8
- - [ onInvalid()] ( #onInvalid )
9
11
- [ onValidSubmit()] ( #onValidsubmit )
10
- - [ onInvalidSubmit()] ( #onInvalidsubmit )
11
- - [ onChange()] ( #onChange )
12
+ - [ preventExternalInvalidation] ( #preventExternalInvalidation )
12
13
- [ reset()] ( #reset )
13
- - [ getModel()] ( #getModel )
14
14
- [ updateInputsWithError()] ( #updateInputsWithError )
15
- - [ preventExternalInvalidation] ( #preventExternalInvalidation )
15
+ - [ updateInputsWithValue()] ( #setInputsWithValue )
16
+ - [ validationErrors] ( #validationErrors )
16
17
- [ withFormsy] ( #withFormsy )
17
- - [ name] ( #name )
18
+ - [ errorMessage] ( #errorMessage )
19
+ - [ errorMessages] ( #errorMessages )
20
+ - [ formNoValidate] ( #formNoValidate )
21
+ - [ hasValue] ( #hasValue )
18
22
- [ innerRef] ( #innerRef )
19
- - [ value] ( #value )
20
- - [ validations] ( #validations )
21
- - [ validationError] ( #validationError )
22
- - [ validationErrors] ( #validationErrors )
23
+ - [ isFormDisabled] ( #isFormDisabled )
24
+ - [ isFormSubmitted] ( #isFormSubmitted )
25
+ - [ isPristine] ( #isPristine )
26
+ - [ isRequired] ( #isRequired )
27
+ - [ isValid] ( #isValid )
28
+ - [ isValidValue()] ( #isValidValue )
29
+ - [ name] ( #name )
23
30
- [ required] ( #required )
24
- - [ getValue()] ( #getvalue )
25
- - [ setValue()] ( #setValue )
26
31
- [ resetValue()] ( #resetValue )
27
- - [ getErrorMessage()] ( #getErrorMessage )
28
- - [ getErrorMessages()] ( #getErrorMessages )
29
- - [ isValid()] ( #isValid )
30
- - [ isValidValue()] ( #isValidValue )
31
- - [ isRequired()] ( #isRequired )
32
- - [ showRequired()] ( #showRequired )
33
- - [ showError()] ( #showError )
34
- - [ isPristine()] ( #isPristine )
35
- - [ isFormDisabled()] ( #isFormDisabled )
36
- - [ isFormSubmitted()] ( #isFormSubmitted )
37
- - [ formNoValidate] ( #formNoValidate )
32
+ - [ setValue()] ( #setValue )
33
+ - [ showError] ( #showError )
34
+ - [ showRequired] ( #showRequired )
35
+ - [ validationError] ( #validationError )
36
+ - [ validationErrors] ( #validationErrors )
37
+ - [ validations] ( #validations )
38
+ - [ value] ( #value )
38
39
- [ propTypes] ( #propTypes )
39
40
- [ addValidationRule] ( #addValidationRule )
40
41
- [ Validators] ( #validators )
@@ -211,6 +212,25 @@ argument and optionally invalidate the form by passing `true` as the second argu
211
212
validation. This is also passed as the third parameter to the [ ` onSubmit ` ] ( #onSubmit ) , [ ` onValidSubmit ` ] ( #onValid ) or
212
213
[ ` onInvalidSubmit ` ] ( #onInvalid ) .
213
214
215
+ #### <a id =" updateInputsWithValue " >updateInputsWithValue(values)</a >
216
+
217
+ ``` jsx
218
+ class MyForm extends React .Component {
219
+ someFunction = () => {
220
+ this .refs .form .updateInputsWithValue ({
221
+
222
+ ' field[10]' : ' value!' ,
223
+ });
224
+ };
225
+ render () {
226
+ return < Formsy ref= " form" > ... < / Formsy> ;
227
+ }
228
+ }
229
+ ```
230
+
231
+ Manually set the form fields values by taking an object that maps field name to value as the first argument and
232
+ optionally validate the inputs by passing ` true ` as the second argument.
233
+
214
234
#### <a id =" preventExternalInvalidation " >preventExternalInvalidation</a >
215
235
216
236
``` jsx
@@ -245,7 +265,7 @@ class MyInput extends React.Component {
245
265
render () {
246
266
return (
247
267
< div>
248
- < input value= {this .props .getValue () } onChange= {e => this .props .setValue (e .target .value )} / >
268
+ < input value= {this .props .value } onChange= {e => this .props .setValue (e .target .value )} / >
249
269
< / div>
250
270
);
251
271
}
@@ -293,9 +313,8 @@ class MyForm extends React.Component {
293
313
< MyInput name= " email" value= " My initial value" / >
294
314
```
295
315
296
- You should always use the [ ** getValue()** ] ( #getvalue ) method inside your formsy form element. To pass an initial value,
297
- use the value attribute. This value will become the "pristine" value and any reset of the form will bring back this
298
- value.
316
+ To pass an initial value, use the value attribute. This value will become the "pristine" value and any reset of the form
317
+ will bring back this value.
299
318
300
319
#### <a id =" validations " >validations</a >
301
320
@@ -371,12 +390,12 @@ A property that tells the form that the form input component value is required.
371
390
372
391
Would be typical for a checkbox type of form element that must be checked, e.g. agreeing to Terms of Service.
373
392
374
- #### <a id =" getvalue " >getValue() </a >
393
+ #### <a id =" value " >value </a >
375
394
376
395
``` jsx
377
396
class MyInput extends React .Component {
378
397
render () {
379
- return < input type= " text" onChange= {this .changeValue } value= {this .props .getValue () } / > ;
398
+ return < input type= " text" onChange= {this .changeValue } value= {this .props .value } / > ;
380
399
}
381
400
}
382
401
```
@@ -391,7 +410,7 @@ class MyInput extends React.Component {
391
410
this .props .setValue (event .currentTarget .value );
392
411
};
393
412
render () {
394
- return < input type= " text" onChange= {this .changeValue } value= {this .props .getValue () } / > ;
413
+ return < input type= " text" onChange= {this .changeValue } value= {this .props .value } / > ;
395
414
}
396
415
}
397
416
```
@@ -413,8 +432,8 @@ class MyInput extends React.Component {
413
432
render () {
414
433
return (
415
434
< div>
416
- < input type= " text" onChange= {this .changeValue } value= {this .props .getValue () } / >
417
- < button onClick= {this .props .resetValue () }> Reset< / button>
435
+ < input type= " text" onChange= {this .changeValue } value= {this .props .value } / >
436
+ < button onClick= {this .props .resetValue }> Reset< / button>
418
437
< / div>
419
438
);
420
439
}
@@ -423,7 +442,7 @@ class MyInput extends React.Component {
423
442
424
443
Resets to empty value. This will run a ** setState()** on the component and do a render.
425
444
426
- #### <a id =" getErrorMessage " >getErrorMessage() </a >
445
+ #### <a id =" errorMessage " >errorMessage </a >
427
446
428
447
``` jsx
429
448
class MyInput extends React .Component {
@@ -433,43 +452,43 @@ class MyInput extends React.Component {
433
452
render () {
434
453
return (
435
454
< div>
436
- < input type= " text" onChange= {this .changeValue } value= {this .props .getValue () } / >
437
- < span> {this .props .getErrorMessage () }< / span>
455
+ < input type= " text" onChange= {this .changeValue } value= {this .props .value } / >
456
+ < span> {this .props .errorMessage }< / span>
438
457
< / div>
439
458
);
440
459
}
441
460
}
442
461
```
443
462
444
- Will return the validation message set if the form input component is invalid. If form input component is valid it
445
- returns ** null** .
463
+ Will contain the validation message set if the form input component is invalid. If form input component is valid it will
464
+ be ** null** .
446
465
447
- #### <a id =" getErrorMessages " >getErrorMessages() </a >
466
+ #### <a id =" errorMessages " >errorMessages </a >
448
467
449
- Will return the validation messages set if the form input component is invalid. If form input component is valid it
450
- returns empty array.
468
+ Will contain the validation messages set if the form input component is invalid. If form input component is valid it
469
+ will be an empty array.
451
470
452
- #### <a id =" isValid " >isValid() </a >
471
+ #### <a id =" isValid " >isValid</a >
453
472
454
473
``` jsx
455
474
class MyInput extends React .Component {
456
475
changeValue = event => {
457
476
this .props .setValue (event .currentTarget .value );
458
477
};
459
478
render () {
460
- var face = this .props .isValid () ? ' :-)' : ' :-(' ;
479
+ var face = this .props .isValid ? ' :-)' : ' :-(' ;
461
480
return (
462
481
< div>
463
482
< span> {face}< / span>
464
- < input type= " text" onChange= {this .changeValue } value= {this .props .getValue () } / >
465
- < span> {this .props .getErrorMessage () }< / span>
483
+ < input type= " text" onChange= {this .changeValue } value= {this .props .value } / >
484
+ < span> {this .props .errorMessage }< / span>
466
485
< / div>
467
486
);
468
487
}
469
488
}
470
489
```
471
490
472
- Returns the valid state of the form input component.
491
+ The valid state of the form input component.
473
492
474
493
#### <a id =" isValidValue " >isValidValue()</a >
475
494
@@ -483,7 +502,7 @@ class MyInput extends React.Component {
483
502
}
484
503
}
485
504
render () {
486
- return < input type= " text" onChange= {this .changeValue } value= {this .props .getValue () }/ > ;
505
+ return < input type= " text" onChange= {this .changeValue } value= {this .props .value }/ > ;
487
506
}
488
507
});
489
508
@@ -498,7 +517,7 @@ class MyForm extends React.Component {
498
517
}
499
518
```
500
519
501
- #### <a id =" isRequired " >isRequired() </a >
520
+ #### <a id =" isRequired " >isRequired</a >
502
521
503
522
``` jsx
504
523
class MyInput extends React .Component {
@@ -509,53 +528,53 @@ class MyInput extends React.Component {
509
528
return (
510
529
< div>
511
530
< span>
512
- {this .props .label } {this .props .isRequired () ? ' *' : null }
531
+ {this .props .label } {this .props .isRequired ? ' *' : null }
513
532
< / span>
514
- < input type= " text" onChange= {this .changeValue } value= {this .props .getValue () } / >
515
- < span> {this .props .getErrorMessage () }< / span>
533
+ < input type= " text" onChange= {this .changeValue } value= {this .props .value } / >
534
+ < span> {this .props .errorMessage }< / span>
516
535
< / div>
517
536
);
518
537
}
519
538
}
520
539
```
521
540
522
- Returns true if the required property has been passed.
541
+ True if the required property has been passed.
523
542
524
- #### <a id =" showRequired " >showRequired() </a >
543
+ #### <a id =" showRequired " >showRequired</a >
525
544
526
545
``` jsx
527
546
class MyInput extends React .Component {
528
547
changeValue = event => {
529
548
this .props .setValue (event .currentTarget .value );
530
549
};
531
550
render () {
532
- var className = this .props .showRequired () ? ' required' : ' ' ;
551
+ var className = this .props .showRequired ? ' required' : ' ' ;
533
552
return (
534
553
< div className= {className}>
535
- < input type= " text" onChange= {this .changeValue } value= {this .props .getValue () } / >
536
- < span> {this .props .getErrorMessage () }< / span>
554
+ < input type= " text" onChange= {this .changeValue } value= {this .props .value } / >
555
+ < span> {this .props .errorMessage }< / span>
537
556
< / div>
538
557
);
539
558
}
540
559
}
541
560
```
542
561
543
- Lets you check if the form input component should indicate if it is a required field. This happens when the form input
544
- component value is empty and the required prop has been passed.
562
+ True if the form input component should indicate if it is a required field. This happens when the form input component
563
+ value is empty and the required prop has been passed.
545
564
546
- #### <a id =" showError " >showError() </a >
565
+ #### <a id =" showError " >showError</a >
547
566
548
567
``` jsx
549
568
class MyInput extends React .Component {
550
569
changeValue = event => {
551
570
this .props .setValue (event .currentTarget .value );
552
571
};
553
572
render () {
554
- var className = this .props .showRequired () ? ' required' : this .props .showError () ? ' error' : ' ' ;
573
+ var className = this .props .showRequired ? ' required' : this .props .showError ? ' error' : ' ' ;
555
574
return (
556
575
< div className= {className}>
557
- < input type= " text" onChange= {this .changeValue } value= {this .props .getValue () } / >
558
- < span> {this .props .getErrorMessage () }< / span>
576
+ < input type= " text" onChange= {this .changeValue } value= {this .props .value } / >
577
+ < span> {this .props .errorMessage }< / span>
559
578
< / div>
560
579
);
561
580
}
@@ -565,7 +584,7 @@ class MyInput extends React.Component {
565
584
Lets you check if the form input component should indicate if there is an error. This happens if there is a form input
566
585
component value and it is invalid or if a server error is received.
567
586
568
- #### <a id =" isPristine " >isPristine() </a >
587
+ #### <a id =" isPristine " >isPristine</a >
569
588
570
589
``` jsx
571
590
class MyInput extends React .Component {
@@ -575,8 +594,8 @@ class MyInput extends React.Component {
575
594
render () {
576
595
return (
577
596
< div>
578
- < input type= " text" onChange= {this .changeValue } value= {this .props .getValue () } / >
579
- < span> {this .props .isPristine () ? ' You have not touched this yet' : ' ' }< / span>
597
+ < input type= " text" onChange= {this .changeValue } value= {this .props .value } / >
598
+ < span> {this .props .isPristine ? ' You have not touched this yet' : ' ' }< / span>
580
599
< / div>
581
600
);
582
601
}
@@ -588,14 +607,14 @@ By default all Formsy input elements are pristine, which means they are not "tou
588
607
589
608
** note!** When the form is reset (using ` reset(...) ` ) the inputs are reset to their pristine state.
590
609
591
- #### <a id =" isFormDisabled " >isFormDisabled() </a >
610
+ #### <a id =" isFormDisabled " >isFormDisabled</a >
592
611
593
612
``` jsx
594
613
class MyInput extends React .Component {
595
614
render () {
596
615
return (
597
616
< div>
598
- < input type= " text" value= {this .props .getValue () } disabled= {this .props .isFormDisabled () } / >
617
+ < input type= " text" value= {this .props .value } disabled= {this .props .isFormDisabled } / >
599
618
< / div>
600
619
);
601
620
}
@@ -604,25 +623,25 @@ class MyInput extends React.Component {
604
623
React .render (< Formsy disabled= {true } / > );
605
624
```
606
625
607
- You can now disable the form itself with a prop and use ** isFormDisabled() ** inside form elements to verify this prop.
626
+ You can disable the form itself with a prop and use ** isFormDisabled** inside form elements to verify this prop.
608
627
609
- #### <a id =" isFormSubmitted " >isFormSubmitted() </a >
628
+ #### <a id =" isFormSubmitted " >isFormSubmitted</a >
610
629
611
630
``` jsx
612
631
class MyInput extends React .Component {
613
632
render () {
614
- var error = this .props .isFormSubmitted () ? this .props .getErrorMessage () : null ;
633
+ var error = this .props .isFormSubmitted ? this .props .errorMessage : null ;
615
634
return (
616
635
< div>
617
- < input type= " text" value= {this .props .getValue () } / >
636
+ < input type= " text" value= {this .props .value } / >
618
637
{error}
619
638
< / div>
620
639
);
621
640
}
622
641
}
623
642
```
624
643
625
- You can check if the form has been submitted.
644
+ True if the form has been submitted.
626
645
627
646
#### <a id =" formNoValidate " >formNoValidate</a >
628
647
@@ -856,7 +875,7 @@ Return true if the value from input component matches value passed (==).
856
875
< MyInput name= " repeated_password" validations= " equalsField:password" / >
857
876
```
858
877
859
- Return true if the value from input component matches value passed (==).
878
+ Return true if the value from input component matches value of field passed (==).
860
879
861
880
** isLength: length **
862
881
0 commit comments