Búsqueda de sitios web

reactjs - minLength no funciona en typescript, react

Tengo una entrada en Next, TypeScript. Maxlength funciona, pero minlength no funciona ahora. ¿Alguien sabe cómo validar ambos?

Aquí está mi código.

<input type="text" placeholder="text" required={true} minLength={2} maxLength={10} />
<button type="submit">Submit</button>

Respuesta #1

Tu código está bien. Sin embargo, minlength funciona de manera diferente a maxlength.

  • HTML maxlength evita que el usuario escriba más caracteres de los permitidos por el maxlength.
  • HTML minlength permitirá al usuario ingresar menos teclas en comparación con el requisito. Después de todo, necesitan poder comenzar con menos caracteres para llegar a más caracteres. Dicho esto, el campo mostrará un error si no se cumple el minlength.

Ejemplo completo

Usa este componente y presiona la tecla enter para jugar con el campo de entrada:

export default function App() {
  return (
  <form>
    <input type="text" placeholder="text" required={true} minLength={2} maxLength={10} />
    <button type="submit">Submit</button>
  </form>
  );
}

Capturas de pantalla

Porque es obligatorio:

Porque no se cumple la longitud mínima:

Respuesta #2

puedes instalar las bibliotecas de Material UI npm install @material-ui/core bibliotecas de Material UI

Hay muchos componentes. Usa componentes Textfield.
Usando inputProps establecemos maxlength en el textfield

<TextField inputProps={{ maxLength: 10 }} type="text" />

Componentes de Texto de Material UI

Artículos relacionados