35

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?

Ras
  • 811
  • 2
  • 11
  • 22
  • Why don't you keep the error condition in the component state? – galah92 Mar 22 '18 at 09:36
  • @galah92 do you mean `error={this.state.error}`? – Ras Mar 22 '18 at 10:11
  • Exactly. I'm using a variant of `value={this.state.value}` and `error={this.state.value === ""}`. – galah92 Mar 22 '18 at 10:12
  • @galah92 with `value={this.state.value}` and `error={this.state.value === ""}` it not shown an error message, i tried to use `error={this.state.error}` but nothing happens. I want to show an error message with red text color if error happens. As use `errorText` property at the previous version of material-ui. – Ras Mar 22 '18 at 11:18

3 Answers3

80

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!' : ' '}
/>
galah92
  • 2,901
  • 1
  • 19
  • 41
5

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.' : ' '}
/>
MrMojoRisin
  • 1,249
  • 1
  • 12
  • 8
0

I conditionally add attributes to React components.

let inputProps = {};

and add inputProps textfield ...

<TextField
    {...inputProps}
    margin="normal"
    name="firstName"
    label="First Name"
    value={row.name || ''}
    onChange={onChange}
/>

with condition

if(condition)
   inputProps.error: true;
   inputProps.helperText='Empty field!';

see also https://stackoverflow.com/a/31164357/11528102

Mevlüt Beder
  • 19
  • 3