Text-Input widget #616
Assignees
Labels
Comments
This was referenced Nov 9, 2018
3 tasks
nicknisi
added a commit
that referenced
this issue
Feb 26, 2019
**Type:** feature The following has been addressed in the PR: * [x] There is a related issue * [x] All code matches the [style guide](https://github.com/dojo/meta/blob/master/STYLE.md) * [x] Unit or Functional tests are included in the PR <!-- Our bots should ensure: * [ ] All contributors have signed a CLA * [ ] The PR passes CI testing * [ ] Code coverage is maintained * [ ] The PR has been reviewed and approved --> **Description:** This adds validation support as partially described in #616. The user can provide a `validate` property to the widget, which if `true`, will validate against the `type` (`"email"`, for example) and use the browser's built-in validation. Alternatively, `validate` can be a function that accepts the widget's current value as an argument and must return `{ valid: boolean; message: string | undefined; }`. The user can also provide an `onValidate(valid: boolean, message?: string)` which will be called to pass the validation value back up to the parent, along with any potential message. With the current behavior, if `validate` is a function, it is the primary validation, but the other validation (email, for example) is also being checked. **Example:** ```typescript w(TextInput, { key: 't2', type: 'email', label: 'Email (required)', required: true, // validate: true, validate(value: string) { const valid = !!~value.indexOf('nicknisi'); return { valid, message: !valid ? 'Must include nicknisi' : '' }; }, onValidate(valid: boolean, message: string | undefined) { const color = valid ? 'green' : 'red'; console.log(`%c${message}`, `font-weight:bold;color:${color};`, { valid }); }, value: this._value2, onInput: (value: string) => { this._value2 = value; this.invalidate(); } }) ```  ### Breaking changes This PR removes the `invalid` property. The way to mark an input as invalid is to use custom validation. This also slightly affects combobox and enhanced text input as their `invalid` properties will no longer be passed down to the underlying text-input widget.
|
This has been completed |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Overview
This issue is concerned with implementing a material themed text input component.
Native browser validation will be added to the widget controlled by a
validateflag. A custom validator may also be used.Changes to structure
leading: DNodeandtrailing: DNode. This will replaceEnhanced-Text-Input.labelif specified will be renderedbeforethe widget and the option to renderafterwill be removed. Users wishing to use alabelafter an input can do so by manually rendering alabelwidget and linking it to the input viaforandid.New properties
onValue(value: string) => void: callback upon value change, this will replaceonInputcallback.onKey(key: number, preventDefault: () => void): callback onkeyPressleading: DNodewill render a leading section before the inputtrailing: DNodewill render a trailing section after the inputvalidate: boolean | (value: string) => { message: string; valid: boolean }: flag to indicate if widget should validate or callback to perform custom validation.onValidate: (valid: boolean) => void: callback upon validation to inform parent of valid state.Breaking changes
labelAfterpropertyonChangecallbackkeyDown/keyPressonBlur/onFocuswill no longer be passed thevalueFuture work / properties
outlined: booleanrenders the text input with an outline rather than with a line beneath it (this is a material property)fullWidth: booleanrenders the text input full width and treats the label differently (this is a material property)helperText: stringused to provide helper text beneath the text-input (this is a material property)Tasks
The text was updated successfully, but these errors were encountered: