J'utilise le composant TextField pour capturer le numéro de téléphone. Comme l'utilisateur tape, je veux invalider l'entrée si ce n'est pas un nombre ou s'il ne suit pas un format et afficher le errorText. Actuellement errorText est affiché même sans toucher le champ. Comment puis-je obtenir ce comportement?

Toute aide est grandement appréciée.

17
Mo3z 9 mars 2016 à 22:59

5 réponses

Meilleure réponse

En étendant la réponse Larry, définissez errorText sur une propriété en état (errorText dans l'exemple ci-dessous). Lorsque la valeur dans TextField change, validez l'entrée et définissez la valeur de la propriété (errorText) pour afficher et masquer l'erreur.

class PhoneField extends Component
  constructor(props) {
    super(props)
    this.state = { errorText: '', value: props.value }
  }
  onChange(event) {
    if (event.target.value.match(phoneRegex)) {
      this.setState({ errorText: '' })
    } else {
      this.setState({ errorText: 'Invalid format: ###-###-####' })
    }
  }
  render() {
    return (
      <TextField hintText="Phone"
        floatingLabelText="Phone"
        name="phone"
        errorText= {this.state.errorText}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}
34
Community 23 mai 2017 à 12:18

Version de travail Material-UI v3.9.3:

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { helperText: '', error: false };
  }

  onChange(event) {
    if (event.target.value.length > 2) {
      this.setState({ helperText: '', error: false });
    } else {
      this.setState({ helperText: 'Invalid format', error: true });
    }
  }

  render() {
    return (

                   <TextField
                      helperText={this.state.helperText}
                      onChange={this.onChange.bind(this)}
                      error={this.state.error}
                      required
                      id="outlined-required"
                      label="First Name"
                    />
                     );
  }
3
Ivan Bitkin 9 mai 2019 à 11:50

Veuillez ajouter un helperText qui à l'état d'erreur vrai apparaît à l'écran. Je partage un lien pour vous https://material-ui.com/components/text-fields/#validation

0
Hamza Awan 16 mars 2020 à 06:01

Depuis la version 0.20.1, vous pouvez utiliser les accessoires helperText et error

<TextField 
    hintText="Phone"
    error ={this.state.errorText.length === 0 ? false : true }
    floatingLabelText="Phone"
    name="phone"
    helperText={this.state.errorText}
    onChange={this.onChange.bind(this)}/>
26
Sam 12 juil. 2018 à 21:31

Si errorText est une chaîne vide "", elle ne sera pas affichée. Donc, définissez-le sur getInitialState ().

4
Larry Maccherone 9 mars 2016 à 20:28