angularjs - validaciones - validar formulario angular 6

¿Cómo hacer que ngMessage para los campos requeridos solo se muestre sucio o envíe un formulario?

Question

Estoy usando AngularJS 1.3.0 RC0 y mensajes angulares. ng-messages muestra diligentemente mensajes de error para esos campos "requeridos" cuando un formulario se carga inicialmente y es prístino. Entonces, la página de formulario recién cargada se llena con mensajes de error. Esto no es lo que quiero. ¿Cómo hacer que ngMessage para los campos requeridos solo se muestre cuando esos campos están sucios o presentando un formulario?

He leído el documento oficial, no tengo idea. Y traté de poner "ng-show =" fieldName. $ Dirty "" en ng-messages div, no funcionó. ¡Cualquier ayuda sería muy apreciada!

Answer 1

¿Los mensajes de error siguen apareciendo después de haber satisfecho sus condiciones? En ese caso, ¿recordó tomar una dependencia de ngMessages en su módulo angular? P.ej:

angular.module("exampleModule", ["ngMessages"]);

Answer 2

En lugar de usar ng, si se sugiere, podrías hacer algo como ...

<div ng-messages=''myForm.myControl.$error'' ng-if=''submitted''>
   <div ng-message=''required''>Required field</div>
</div>

Y en su botón de enviar, agregue:

ng-click="submitted=true"

Probablemente quiera cambiar ''$ scope.submitted'' de nuevo a falso cuando vuelva a escribir, para poder agregar esto a su entrada de texto / correo electrónico:

ng-keyup="submitted=false"

De esta forma, solo el botón de enviar cambiará ''$ scope.submitted'' a verdadero y todo lo demás lo configurará en falso, por lo tanto, ocultará su mensaje de error hasta que haga clic en el botón de enviar.

Answer 3

Encontré esta respuesta útil, pero no resolvió el problema del mensaje de error rondando por siempre. Se me ocurrió un uso un poco más complejo de mostrar y ocultar de la siguiente manera:

<div class="help-block"
    ng-messages="addPlanForm.planName.$error"
    ng-show="addPlanForm.$submitted || addPlanForm.planName.$dirty || (addPlanForm.planName.$invalid && addPlanForm.planName.$touched)">
    <p ng-message="required" ng-hide="addPlanForm.planName.$valid">Your name is required.</p>
</div>

Al agregar ng-hide en el mensaje generado cuando ocurre un error, el mensaje desaparece cuando el usuario corrige el error. Muy fresco. ME ENCANTA ANGULAR

Answer 4

Estaba luchando con esto y lo que sucedía era que mis mensajes ng no aparecían porque el comportamiento predeterminado del navegador no permitía el envío de formularios no válidos con ng-required = "true". Para resolver esto puedes decorar el formulario con novalidate. Aquí está el ejemplo completo de trabajo para mí:

<form name="myForm" novalidate ng-submit="myForm.$valid && controllSideSubmitHandle()">
  <input type="text" name="name" ng-model="myScope.name" ng-required="true">
  <div ng-messages="myForm.$error || myForm.$submitted" style="color:maroon" role="alert" ng-if="myForm.name.$dirty || myForm.$submitted">
    <div ng-message="required">Name is required.</div>
  </div>
  <input type="submit" value="Submit"/>
</form>

Answer 5

La mejor forma de hacerlo es con $ tocado:

<div class="help-block" ng-messages="userForm.name.$error" ng-show="userForm.name.$touched">
    ...
</div>

Answer 6

No quise mostrar mi mensaje hasta que hubo algún error o el usuario intentó enviar la página, y ninguna de las soluciones anteriores funcionó.

Finalmente terminé exitosamente con esto:

<form name=''frmUser''>
..........
..........
<div ng-messages="frmUser.firstName.$error" 
     ng-show=''frmUser.$submitted || frmUser.firstName.$dirty'' role="alert">
      <div ng-message="required" class="err">Required</div>
      <div ng-message="maxlength" class="err">Maximum 50 characters.</div>
</div>
<input ng-model="model.first"
       name="firstName"
       type="text"
       ng-required="true"
       ng-maxlength="50"
       placeholder="Enter your first name" />

</form>

Si escribe algo que no es válido, entonces muestre el error

Si intenta enviar la página y no ha proporcionado el campo requerido, se mostrará un error.

Answer 7

Resolví este problema con una regla css

[ng-messages] { display: none; color:red; } 
.ng-dirty [ng-messages] { display:block }

Eso es..

Funciona como un encanto para mí.

Aquí hay un plunker

El uso de clases de Angular es increíble, ¡puedes hacer muchas cosas con él!

Answer 8

Si está utilizando material AngularJS, ¡gran parte de esta funcionalidad viene de la caja! Solo recuerde poner todo dentro de un <md-input-container> .

Aquí hay un ejemplo de codepen para que pueda ver cómo se ve. Esto no solo oculta el error antes de hacer clic en la entrada, sino que agregará un bonito estilo rojo y una animación cuando aparezca.

Aquí está el código real:

  <form name="books" novalidate>
    <md-input-container>
      <input ng-model="title" name="title" required/>
      <div ng-messages="books.title.$error">
        <div ng-message="required">Title is required</div>
      </div>
    </md-input-container>
  </form>

Answer 9

Solo prueba esto

<div ng-messages=''myForm.fieldName.$error && (myForm.fieldName.$dirty || myForm.$submitted)'' >
    <div ng-message=''required''>Required field</div>
</div>

Answer 10

Solo si está sucio

<div ng-messages="myForm.myField.$dirty && myForm.myField.$error">
    <div ng-message=''required''>Required field</div>
</div>

Solo si se envía el formulario:

<div ng-messages="myForm.$submitted && myForm.myField.$error">
    <div ng-message=''required''>Required field</div>
</div>

Answer 11

Use el atributo ng-if para verificar $dirty en la etiqueta que tiene ng-messages .

Ejemplo:

<div ng-messages=''myForm.myControl.$error'' ng-if=''myForm.myControl.$dirty''>
    <div ng-message=''required''>Required field</div>
</div>

Answer 12

<input required type="text" ng-model="model" name="field" ng-maxlength="13" ng-minlength="10">     
<div ng-messages="form.field.$error" ng-if=''form.$submitted''>
            <p ng-message="required">Required</p>
            <p ng-message="maxlength">not a valid field. Length exceeds.</p>
            <p ng-message="minlength">not a valid field. Length is shorter.</p>
</div>

El tipo de botón debe enviarse y esto funcionará.