Skip to content

Commit ca2f3fe

Browse files
authored
Rewrite API docs to match Formsy 2.x release (#190)
* Rewrite API docs to match Formsy 2.x breaking changes * Change form.setValue to form.updateInputsWithValue (#375) * Change form.setValue to form.updateInputsWithValue * Fix built
1 parent c5b8209 commit ca2f3fe

File tree

6 files changed

+123
-107
lines changed

6 files changed

+123
-107
lines changed

API.md

+92-73
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,41 @@
11
# API
22

33
- [Formsy](#formsy)
4+
- [getModel()](#getModel)
45
- [mapping](#mapping)
5-
- [validationErrors](#validationErrors)
6+
- [onChange()](#onChange)
7+
- [onInvalid()](#onInvalid)
8+
- [onInvalidSubmit()](#onInvalidsubmit)
69
- [onSubmit()](#onSubmit)
710
- [onValid()](#onValid)
8-
- [onInvalid()](#onInvalid)
911
- [onValidSubmit()](#onValidsubmit)
10-
- [onInvalidSubmit()](#onInvalidsubmit)
11-
- [onChange()](#onChange)
12+
- [preventExternalInvalidation](#preventExternalInvalidation)
1213
- [reset()](#reset)
13-
- [getModel()](#getModel)
1414
- [updateInputsWithError()](#updateInputsWithError)
15-
- [preventExternalInvalidation](#preventExternalInvalidation)
15+
- [updateInputsWithValue()](#setInputsWithValue)
16+
- [validationErrors](#validationErrors)
1617
- [withFormsy](#withFormsy)
17-
- [name](#name)
18+
- [errorMessage](#errorMessage)
19+
- [errorMessages](#errorMessages)
20+
- [formNoValidate](#formNoValidate)
21+
- [hasValue](#hasValue)
1822
- [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)
2330
- [required](#required)
24-
- [getValue()](#getvalue)
25-
- [setValue()](#setValue)
2631
- [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)
3839
- [propTypes](#propTypes)
3940
- [addValidationRule](#addValidationRule)
4041
- [Validators](#validators)
@@ -211,6 +212,25 @@ argument and optionally invalidate the form by passing `true` as the second argu
211212
validation. This is also passed as the third parameter to the [`onSubmit`](#onSubmit), [`onValidSubmit`](#onValid) or
212213
[`onInvalidSubmit`](#onInvalid).
213214

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+
214234
#### <a id="preventExternalInvalidation">preventExternalInvalidation</a>
215235

216236
```jsx
@@ -245,7 +265,7 @@ class MyInput extends React.Component {
245265
render() {
246266
return (
247267
<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)} />
249269
</div>
250270
);
251271
}
@@ -293,9 +313,8 @@ class MyForm extends React.Component {
293313
<MyInput name="email" value="My initial value" />
294314
```
295315

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.
299318

300319
#### <a id="validations">validations</a>
301320

@@ -371,12 +390,12 @@ A property that tells the form that the form input component value is required.
371390

372391
Would be typical for a checkbox type of form element that must be checked, e.g. agreeing to Terms of Service.
373392

374-
#### <a id="getvalue">getValue()</a>
393+
#### <a id="value">value</a>
375394

376395
```jsx
377396
class MyInput extends React.Component {
378397
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} />;
380399
}
381400
}
382401
```
@@ -391,7 +410,7 @@ class MyInput extends React.Component {
391410
this.props.setValue(event.currentTarget.value);
392411
};
393412
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} />;
395414
}
396415
}
397416
```
@@ -413,8 +432,8 @@ class MyInput extends React.Component {
413432
render() {
414433
return (
415434
<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>
418437
</div>
419438
);
420439
}
@@ -423,7 +442,7 @@ class MyInput extends React.Component {
423442

424443
Resets to empty value. This will run a **setState()** on the component and do a render.
425444

426-
#### <a id="getErrorMessage">getErrorMessage()</a>
445+
#### <a id="errorMessage">errorMessage</a>
427446

428447
```jsx
429448
class MyInput extends React.Component {
@@ -433,43 +452,43 @@ class MyInput extends React.Component {
433452
render() {
434453
return (
435454
<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>
438457
</div>
439458
);
440459
}
441460
}
442461
```
443462

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**.
446465

447-
#### <a id="getErrorMessages">getErrorMessages()</a>
466+
#### <a id="errorMessages">errorMessages</a>
448467

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.
451470

452-
#### <a id="isValid">isValid()</a>
471+
#### <a id="isValid">isValid</a>
453472

454473
```jsx
455474
class MyInput extends React.Component {
456475
changeValue = event => {
457476
this.props.setValue(event.currentTarget.value);
458477
};
459478
render() {
460-
var face = this.props.isValid() ? ':-)' : ':-(';
479+
var face = this.props.isValid ? ':-)' : ':-(';
461480
return (
462481
<div>
463482
<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>
466485
</div>
467486
);
468487
}
469488
}
470489
```
471490

472-
Returns the valid state of the form input component.
491+
The valid state of the form input component.
473492

474493
#### <a id="isValidValue">isValidValue()</a>
475494

@@ -483,7 +502,7 @@ class MyInput extends React.Component {
483502
}
484503
}
485504
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}/>;
487506
}
488507
});
489508

@@ -498,7 +517,7 @@ class MyForm extends React.Component {
498517
}
499518
```
500519

501-
#### <a id="isRequired">isRequired()</a>
520+
#### <a id="isRequired">isRequired</a>
502521

503522
```jsx
504523
class MyInput extends React.Component {
@@ -509,53 +528,53 @@ class MyInput extends React.Component {
509528
return (
510529
<div>
511530
<span>
512-
{this.props.label} {this.props.isRequired() ? '*' : null}
531+
{this.props.label} {this.props.isRequired ? '*' : null}
513532
</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>
516535
</div>
517536
);
518537
}
519538
}
520539
```
521540

522-
Returns true if the required property has been passed.
541+
True if the required property has been passed.
523542

524-
#### <a id="showRequired">showRequired()</a>
543+
#### <a id="showRequired">showRequired</a>
525544

526545
```jsx
527546
class MyInput extends React.Component {
528547
changeValue = event => {
529548
this.props.setValue(event.currentTarget.value);
530549
};
531550
render() {
532-
var className = this.props.showRequired() ? 'required' : '';
551+
var className = this.props.showRequired ? 'required' : '';
533552
return (
534553
<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>
537556
</div>
538557
);
539558
}
540559
}
541560
```
542561

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.
545564

546-
#### <a id="showError">showError()</a>
565+
#### <a id="showError">showError</a>
547566

548567
```jsx
549568
class MyInput extends React.Component {
550569
changeValue = event => {
551570
this.props.setValue(event.currentTarget.value);
552571
};
553572
render() {
554-
var className = this.props.showRequired() ? 'required' : this.props.showError() ? 'error' : '';
573+
var className = this.props.showRequired ? 'required' : this.props.showError ? 'error' : '';
555574
return (
556575
<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>
559578
</div>
560579
);
561580
}
@@ -565,7 +584,7 @@ class MyInput extends React.Component {
565584
Lets you check if the form input component should indicate if there is an error. This happens if there is a form input
566585
component value and it is invalid or if a server error is received.
567586

568-
#### <a id="isPristine">isPristine()</a>
587+
#### <a id="isPristine">isPristine</a>
569588

570589
```jsx
571590
class MyInput extends React.Component {
@@ -575,8 +594,8 @@ class MyInput extends React.Component {
575594
render() {
576595
return (
577596
<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>
580599
</div>
581600
);
582601
}
@@ -588,14 +607,14 @@ By default all Formsy input elements are pristine, which means they are not "tou
588607

589608
**note!** When the form is reset (using `reset(...)`) the inputs are reset to their pristine state.
590609

591-
#### <a id="isFormDisabled">isFormDisabled()</a>
610+
#### <a id="isFormDisabled">isFormDisabled</a>
592611

593612
```jsx
594613
class MyInput extends React.Component {
595614
render() {
596615
return (
597616
<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} />
599618
</div>
600619
);
601620
}
@@ -604,25 +623,25 @@ class MyInput extends React.Component {
604623
React.render(<Formsy disabled={true} />);
605624
```
606625

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.
608627

609-
#### <a id="isFormSubmitted">isFormSubmitted()</a>
628+
#### <a id="isFormSubmitted">isFormSubmitted</a>
610629

611630
```jsx
612631
class MyInput extends React.Component {
613632
render() {
614-
var error = this.props.isFormSubmitted() ? this.props.getErrorMessage() : null;
633+
var error = this.props.isFormSubmitted ? this.props.errorMessage : null;
615634
return (
616635
<div>
617-
<input type="text" value={this.props.getValue()} />
636+
<input type="text" value={this.props.value} />
618637
{error}
619638
</div>
620639
);
621640
}
622641
}
623642
```
624643

625-
You can check if the form has been submitted.
644+
True if the form has been submitted.
626645

627646
#### <a id="formNoValidate">formNoValidate</a>
628647

@@ -856,7 +875,7 @@ Return true if the value from input component matches value passed (==).
856875
<MyInput name="repeated_password" validations="equalsField:password"/>
857876
```
858877

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 (==).
860879

861880
**isLength:length**
862881

LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2014-2016 PatientSky A/S
3+
Copyright (c) 2014-2019 The Formsy Authors
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

0 commit comments

Comments
 (0)