пользовательский интерфейс реагирования текстовое поле (тип = число) проверить наличие 10 символов

Question

<TextField
    variant="outlined"
    required
    fullWidth
    id="accno"
    label="Main Account No"
    type="number"
    name="accno"
    //inputProps={{ className:"input-acc", pattern: "^.{0,10}$"}}
    autoComplete="accno"
    onChange={(e) => this.handleChange(e)}
    onInput={(e)=>{ 
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,10)
    }}
    min={10}
/>

реагирует на материал. Текстовое поле (тип = число) проверяет наличие 10 символов (обязательно). В противном случае мне нужна проверка формы для отображения ошибки. Я попробовал шаблон регулярных выражений, он не будет работать, потому что этот тип поля - число.

Answer 1

Интуитивно понятный способ проверки длины значения в handleChange

onChange={(e) => {
if(e.target.value.toString().length >= 10){
  //display error
 }
this.handleChange(e)
  }
}

Возможно, вам также понадобится добавить свойство error в TextField