2

Mi problema es que no puedo o no sé mostrar un cartel que me pida corregir un campo del formulario.

Yo estoy usando este método pero no me funciona:

<script src="https://code.angularjs.org/snapshot/angular.min.js"></script>

<form name="carga">
  <input type="text" class="form-control" id="nombreaer" minlength="8" required ng-model="nombreaer" placeholder="Nombre">
  <label for="nombreaer" ng-show="carga.nombreaer.$invalid">Ingrese el nombre correctamente</label>
</form>

2
  • 1
    Hola Maxi Albert, bienvenido a Stack Overflow en español (no te olvides de completar el recorrido de bienvenida para aprender más sobre el sitio y ganar tu primera medalla). Una duda: ¿qué versión de angular estás usando? (no sé si es importante, pero quizás lo sea). También, esto es algo que se puede hacer incluso sin Angular/JavaScript, sólo con HTML y CSS, ¿estarías abierto a una respuesta de ese tipo?
    – Alvaro Montoro
    Commented el 23 jun. 2019 a las 23:48
  • Muchas gracias por editar la pregunta para que quede correctamente en ortografia y compresion, estoy usando angularjs ultima version y si estoy abierto a la repuesta usando solamente HTML, en clases me enseñaron que con esa sintaxis, usando la directiva de angular, se simplificaba demasiado pero no veo que funcione. Commented el 24 jun. 2019 a las 0:46

1 respuesta 1

0

Al código le faltan un par de cosas:

  • Falta especificar la aplicación con ng-app (ésta me imagino que es mi culpa y que lo tienes bien en tu código, pero se me olvidó ponerlo en la demo porque no soy un experto en Angular).
  • Falta darle un name al input. Los campos de formularios deben tener un atributo name (que es el que se manda al servidor). Parece que en la cadena carga.nombreaer.$invalid, ese nombreaer no es el id o el modelo sino el nombre del campo.

Una vez añades esas dos cosas que faltan, ya funciona sin problemas:

<script src="https://code.angularjs.org/snapshot/angular.min.js"></script>

<form name="carga" ng-app="">
  <input type="text" class="form-control" id="nombreaer" minlength="8" required ng-model="nombreaer" name="nombreaer" placeholder="Nombre">
  <label for="nombreaer" ng-show="carga.nombreaer.$invalid">Ingrese el nombre correctamente</label>
</form>


Alternativamente, y como te ponía en un comentario, esto también se podría hacer en HTML+CSS sin necesidad de JavaScript/Angular. Sería usando la pseudo-clase :invalid que te indica si un campo no es válido. Aquí lo puedes ver:

input + label {
  display: none;
}

input:invalid + label {
  display: inline-block;
}
<form name="carga">
  <input type="text" class="form-control" id="nombreaer" minlength="8" required  name="nombreaer" placeholder="Nombre">
  <label for="nombreaer">Ingrese el nombre correctamente</label>
</form>

2
  • 1
    Excelente! funciona perfectamente, entonces el segundo campo luego del nombre del formulario es el nombre del input y no el nombre del modelo, tiene mas logica si nos ponemos a pensar ya que debemos controlar el campo en si y no solamente el texto a escribir. doy por solucionada mi pregunta, es posible preguntar sobre una expresion regular que necesito? Commented el 24 jun. 2019 a las 1:16
  • @MaxiAlbert las preguntas sobre expresiones regulares entran dentro de la temática del sitio. Lo único es que tendrás que crear una nueva pregunta.
    – Alvaro Montoro
    Commented el 24 jun. 2019 a las 1:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.