Menu
I want to use Material-UI Next textfield error props link, the props type is boolean. The previous version of Material-UI props name is errorText and the props type is node link.
Textfield Material-UI previous version using errorText props :
<TextField name='name' floatingLabelText='Name' hintText='Type your name' value={this.state.fields.name} onChange={this.onChange} errorText={this.state.error} /> With errorText in Material-UI previous version, the code works good for displaying an error state.
Textfield Material-UI Next using error props:
<TextField name='name' label='Name' placeholder='Type your name' value={this.state.fields.name} onChange={this.onChange} error={true} //only accept true or false value /> On Material-UI Next errorText props changed to error with boolean type and only accept true or false value. If i set the error props to true, the textfield displaying error state at any time. I just want to displaying error state under certain conditions.
How can i use error state this.state.error on Material-UI Next textfield?
576
To invalidate a TextField in React Material UI, we set the error and helperText props of the TextField to display the error message we want. We set the error prop to make the TextField 's border red when we enter invalid input. And we set the helperText prop to display the error text at the bottom.
inputProps applies to what will be input DOM-element and it gets all of its attributes. Therefore, if it's necessary to change something that has to do with an input being a React component (eg. set an Icon ) we should use InputProps .
We can use TextField component in Material UI to show input textbox. import TextField from "@material-ui/core/TextField"; When using the TextField component, we can pass the required attribute to mark the component as required.
You can set the maxLength property for limiting the text in text box. Instead of onChange method you can pass maxLength to the inputProps (lowercase i, not InputProps) props of material-ui TextField . Basically we can edit all input element's native attrs via inputProps object. This was the easiest solution.
Using a react component state, one can store the TextField value and use that as an indicator for an error. Material-UI exposes the error and helperText props to display an error interactively.
Take a look at the following example:
<TextField value={this.state.text} onChange={event => this.setState({ text: event.target.value })} error={text === ""} helperText={text === "" ? 'Empty field!' : ' '} /> I add an example that does not shows an error when the value is empty and validates a regular expression (MAC Address).
<TextField id="macAddress" label="MAC Address" name="macAddress" value={this.state.macAddress} onChange={this.handleChange} error={this.state.macAddress !== "" && !this.state.macAddress.match("^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$")} helperText={this.state.macAddress !== "" && !this.state.macAddress.match("^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$") ? 'MAC Address must be a 6-bytes string.' : ' '} /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
