You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Aug 23, 2022. It is now read-only.
_(Object)_: A map where the keys are validation keys, and the values are the corresponding functions that determine the validity of each key, given the model's value.
139
139
140
140
For example, this control validates that a username exists and is longer than 4 characters:
_(Number)_: The time in milliseconds, by which the change action will be debounced.
167
167
168
-
## `validateOn="..."` {#prop-validateOn}
168
+
## `validateOn="..."`
169
169
_(String | Array)_: A string/array of strings specifying when validation should occur. By default, validation happens with whatever `updateOn` is set to. The `validateOn` property can have these values:
170
170
-`"change"` - validate on the `onChange` event handler
171
171
-`"blur"` - validate on the `onBlur` event handler
@@ -175,7 +175,7 @@ _(String | Array)_: A string/array of strings specifying when validation should
175
175
- Validation will always occur **on load**; i.e., when the component is mounted. This is to ensure an accurate validation state for a new form.
176
176
- To avoid displaying error messages on load (as controls might be invalid), use the `.pristine` property of the control when conditionally showing error messages, or use the `<Errors>` component.
_(Object)_: A map where the keys are validation keys, and the values are the corresponding functions that (asynchronously) determine the validity of each key, given the model's value.
180
180
181
181
Each async validator function is called with 2 arguments:
@@ -200,13 +200,13 @@ import isAvailable from '../path/to/is-available';
200
200
### Notes
201
201
- Async validators will run on `blur`, unless you specify otherwise in the `asyncValidateOn="..."` prop.
_(String | Array)_: A string/array of strings specifying when async validation should occur. By default, validation happens on `"blur"`. The `asyncValidateOn` property can have these values:
205
205
-`"change"` - validate on the `onChange` event handler
206
206
-`"blur"` (default) - validate on the `onBlur` event handler
207
207
-`"focus"` - validate on the `onFocus` event handler
208
208
209
-
## `errors={{...}}` {#prop-errors}
209
+
## `errors={{...}}`
210
210
_(Object)_: A map where the keys are error keys, and the values are the corresponding error validator functions that determine the invalidity of each key, given the model's value.
211
211
212
212
An **error validator** is a function that returns `true` or a truthy value (such as a string) if invalid, and `false` if valid.
@@ -223,7 +223,7 @@ For example, this control validates that a username exists and is longer than 4
223
223
/>
224
224
```
225
225
226
-
## `parser={() => ...}` {#prop-parser}
226
+
## `parser={() => ...}`
227
227
_(Function)_: A function that _parses_ the view value of the control before it is changed. It takes in one argument:
228
228
-`value` - the view value that represents the _next_ model value
An action creator (function) that specifies which action the `<Control>` component should use when dispatching a change to the model. For example, this action is similar to:
245
245
246
246
-`actions.change(model, value)` for text input controls
@@ -281,7 +281,7 @@ function changeAndSubmit(model, value) {
281
281
- Use `changeAction` to do any other custom actions whenever your value is to change.
282
282
- Since `changeAction` expects an action creator and `redux-thunk` is used, you can asynchronously dispatch actions (like the example above).
283
283
284
-
## `controlProps={{...}}` {#prop-controlProps}
284
+
## `controlProps={{...}}`
285
285
_(Object)_: A mapping of control-specific props that will be applied directly to the rendered control. In some cases, this can be a safer way of applying props, especially if there are naming conflicts between `<Control>`-specific props (such as `"model"`) and props that need to go on the rendered control (e.g., `<input {...props} />`).
286
286
287
287
The normal behavior is that any extraneous props on `<Control>` that are not part of `Control.propTypes` (which are documented here) will be given to the rendered input.
@@ -297,7 +297,7 @@ Example:
297
297
/>
298
298
```
299
299
300
-
## `component={...}` {#prop-component}
300
+
## `component={...}`
301
301
_(Function | String | Node)_: A custom component can be passed into the `component={...}` prop, and standard control props and event handlers (such as `onChange`, `onBlur`, `onFocus`, `value`, etc.) will be mapped as expected:
_(Boolean)_: When `true` the `fieldValue` prop is mapped on to the child component. This prop contains information about the field's state such as its validity and whether it has been touched. This is particularly useful when using a custom component as it allows you to dynamically alter the component based on the field's state.
0 commit comments