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>