How to use Material-ui@next TextField error props
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.' : ' '}
/>