solo - La validación angularjs ng-minlength no funciona, el formulario aún se está enviando

validar formulario angular 6

Question

Estoy tratando de enviar el formulario solo en la validación exitosa. la validación funciona para requerido pero no funciona para ng-minlength

la entrada del formulario no es válida pero el formulario aún se está enviando.

<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
<div class="control-group" ng-class="{error: myForm.mobile.$invalid}">
<label class="control-label" for="mobile">Mobile</label>
<div class="controls">
<input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11" required />
<span ng-show="myForm.mobile.$error.required" class="help-inline">Required</span>
<span ng-show="myForm.mobile.$error.minlength" class="help-inline">Mobile number should be minimum 11 character starting from 07</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value ="submit" />
</div>
count: {{count}}<br />
<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
</div>
</form>

http://jsfiddle.net/pMMke/9/

Qué estoy haciendo mal.

No quiero usar el método de deshabilitar el botón de envío.

Answer 1

Este trabajo para mi chicos

 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input ng-minlength="11" class="mdl-textfield__input" type="text" name="cpf" id="cpf" ng-model="avaliacao.cpf" ng-required="true" ng-pattern="/^/d+$/">
<label class="mdl-textfield__label" for="cpf">CPF *</label>
</div>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.required && myForm.cpf.$dirty">Field Required</p>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.pattern">Only numbers</p>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.minlength">Min 11 Chars</p>

Answer 2

Esto debería funcionar:

Para ingresar el número de móvil

ng-show="myForm.mobile.$touched && myForm.mobile.$error.required"

Para longitud mínima

ng-show="myForm.mobile.$touched && myForm.mobile.$error.minlength"

Para longitud maxima

ng-show="myForm.mobile.$touched && myForm.mobile.$error.maxlength" 

Answer 3

Esto es lo que estás haciendo mal: estás mezclando dos conceptos, validadores angulares y validadores HTML5 .

Los validadores HTML5 requeridos , por ejemplo, establecen que:

Cuando está presente, especifica que se debe completar un campo de entrada antes de enviar el formulario.

Por lo tanto, si intenta enviar un formulario que tiene una entrada con este atributo, se mostrará un mensaje que explica esto al usuario y evitará que se envíe el formulario. Este es el comportamiento que quieres. ¿Por qué no funciona para ng-minlength ? Debido a que ng-minlength es un validador angular (se puede decir porque comienza con ng- ), y no agrega ningún comportamiento especial al formulario. Simplemente establece la entrada donde se ubica como no válida (y por lo tanto, el formulario), y le permite decidir qué hacer con ella.

Tiene una opción: puede usar el validador HTML5 de patrón , para especificar que el campo requiere al menos 11 caracteres. Le gustaría esto:

<input type="text" pattern=".{11,}">

Entonces, cuando envía un formulario que contiene esta entrada, no se enviará si el usuario ha ingresado menos de 11 caracteres.

Pero como lo somos, y ya está utilizando el validador de patrones , puede usar la expresión regular en todo su potencial y definir algo como:

<input type="text" pattern="07[0-9]{9}" />

Que solo admitirá valores de 11 caracteres, que comienzan por "07" y que solo contienen dígitos. He modificado tu violín para mostrarte cómo funcionaría: http://jsfiddle.net/helara/w35SQ/

Answer 4

Me enfrento al mismo problema, y ​​creo que solo puede deshabilitar el botón o ignorar el valor introducido por usted mismo. También puede verificar la propiedad $ válida en su controlador e ignorar el valor ... No es tan agradable, pero no encontré otra manera.

Answer 5

Tanto ng-minlength mg-maxlength funcionan en AngularJS. He probado esto en AngularJS versión 1.3.
Asegúrese de usar novalidate con <form> para deshabilitar la validación nativa del navegador.

Answer 6

ngMaxlength="12" ngMinlength="6" erróneamente ngMaxlength="12" ngMinlength="6" lugar de ng-minlength="6" ng-maxlength="12" , ahora está funcionando bien.