Come invalidare un campo di testo nell'interfaccia utente materiale

Question

Sto utilizzando il componente TextField per acquisire il numero di telefono. Mentre l'utente sta digitando, voglio invalidare la voce se non è un numero o se non segue un formato e visualizza errorText. Attualmente errorText viene visualizzato anche senza toccare il campo. Come posso ottenere questo comportamento?

Qualsiasi aiuto è molto apprezzato.

Answer 1

Estendere la risposta Larry, impostare errorText su una proprietà in stato (errorText nell'esempio seguente). Quando cambia il valore in TextField, convalidare la voce e impostare il valore della proprietà (errorText) per visualizzare e nascondere l'errore.

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)} 
     /> 
    ) 
    } 
} 

Answer 2

se errorText è una stringa vuota "", quindi non verrà visualizzato. Quindi, impostalo su getInitialState().

Answer 3

Questo library si occupa di tutto ciò che riguarda i campi di convalida e supporta il materiale-ui

per convalidare il campo, non vi resta che avvolgere la componente del campo ... risparmiando un sacco di fatica nella gestione dichiarati manualmente

<Validation group="myGroup1" 
    validators={[ 
      { 
      validator: (val) => !validator.isEmpty(val), 
      errorMessage: "Cannot be left empty" 
      }, ... 
     }]}> 
      <TextField value={this.state.value} 
         className={styles.inputStyles} 
         style={{width: "100%"}} 
         onChange={ 
         (evt)=>{ 
          console.log("you have typed: ", evt.target.value); 
         } 


    }/>