forms - reactivos - Activación de la activación de todos los campos en el formulario angular enviado

validar formulario angular 6

Question

Estoy usando este método: http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview para validar solo los campos en blur. Esto funciona bien, pero también me gustaría validarlos (y así mostrar los errores para esos campos, si los hay) cuando el usuario hace clic en el botón ''enviar'' (no una llamada real sino una llamada de datos-clic a una función)

¿Hay alguna manera de activar de nuevo la validación en todos los campos al hacer clic en ese botón?

Answer 1

Aquí está mi función global para mostrar los mensajes de error de formulario.

 function show_validation_erros(form_error_object) {
        angular.forEach(form_error_object, function (objArrayFields, errorName) {
            angular.forEach(objArrayFields, function (objArrayField, key) {
                objArrayField.$setDirty();
            });
        });
    };

Y en mis controladores,

if ($scope.form_add_sale.$invalid) { 
    $scope.global.show_validation_erros($scope.form_add_sale.$error);
}

Answer 2

Basado en la respuesta de Thilak, pude encontrar esta solución ...

Como mis campos de formulario solo muestran mensajes de validación si un campo no es válido y el usuario lo tocó, pude usar este código activado por un botón para mostrar mis campos no válidos:

// Show/trigger any validation errors for this step
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) {
  angular.forEach(error, function(field) {
    field.$setTouched();
  });
});
// Prevent user from going to next step if current step is invalid
if (!vm.rfiForm.stepTwo.$valid) {
  isValid = false;
}

<!-- form field -->
<div class="form-group" ng-class="{ ''has-error'': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }">

  <!-- field label -->
  <label class="control-label">Suffix</label>
  <!-- end field label -->
  <!-- field input -->
  <select name="Parent_Suffix__c" class="form-control"
          ng-options="item.value as item.label for item in rfi.contact.Parent_Suffixes"
          ng-model="rfi.contact.Parent_Suffix__c" />
  <!-- end field input -->
  <!-- field help -->
  <span class="help-block" ng-messages="rfi.rfiForm.stepTwo.Parent_Suffix__c.$error" ng-show="rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched">
    <span ng-message="required">this field is required</span>
  </span>  
  <!-- end field help -->
</div>
<!-- end form field -->

Answer 3

Bueno, la forma angular sería permitirle manejar la validación, ya que lo hace en cada cambio de modelo, y solo mostrar el resultado al usuario, cuando lo desee.

En este caso, usted decide cuándo mostrar los errores, solo tiene que establecer una bandera: http://plnkr.co/edit/0NNCpQKhbLTYMZaxMQ9l?p=preview

Hasta donde sé, hay un problema archivado en angular para permitirnos tener un control de formulario más avanzado. Como no está resuelto, utilizaría esto en lugar de reinventar todos los métodos de validación existentes.

editar: Pero si insistes en tu camino, aquí está tu violín modificado con validación antes de enviarlo. http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview El controlador transmite un evento cuando se hace clic en el botón, y la directiva realiza la magia de validación.

Answer 4

En caso de que alguien vuelva a esto más tarde ... Ninguna de las anteriores funcionó para mí. Así que profundicé en las agallas de la validación de formas angulares y encontré la función que llaman para ejecutar validadores en un campo dado. Esta propiedad se llama convenientemente $validate .

Si tiene un formulario con nombre myForm , puede llamar programáticamente a myForm.my_field.$validate() para ejecutar la validación del campo. Por ejemplo:

<div ng-form name="myForm">
    <input required name="my_field" type="text" ng-blur="myForm.my_field.$validate()">
</div>

Tenga en cuenta que llamar $validate tiene implicaciones para su modelo. De los documentos angulares para ngModelCtrl. $ Validate:

Ejecuta cada uno de los validadores registrados (primeros validadores síncronos y luego validadores asíncronos). Si la validez cambia a no válida, el modelo se establecerá como indefinido, a menos que ngModelOptions.allowInvalid sea verdadero. Si la validez cambia a válida, establecerá el modelo en el último válido $ modelValue válido, es decir, el último valor analizado o el último valor establecido del alcance.

Entonces, si planea hacer algo con el valor del modelo no válido (como mostrar un mensaje indicándole que así sea), entonces necesita asegurarse de que allowInvalid se establezca en true para su modelo.

Answer 5

Hice algo para que funcione.

<form name="form" name="plantRegistrationForm">
  <div ng-class="{ ''has-error'': (form.$submitted || form.headerName.$touched) && form.headerName.$invalid }">
    <div class="col-md-3">
      <div class="label-color">HEADER NAME 
        <span class="red"><strong>*</strong></span></div>
    </div>
    <div class="col-md-9">
      <input type="text" name="headerName" id="headerName" 
             ng-model="header.headerName" 
             maxlength="100" 
             class="form-control" required>
      <div ng-show="form.$submitted || form.headerName.$touched">
        <span ng-show="form.headerName.$invalid" 
              class="label-color validation-message">Header Name is required</span>
      </div>
    </div>
  </div>

  <button ng-click="addHeader(form, header)" 
          type="button" 
          class="btn btn-default pull-right">Add Header
  </button>

</form>

En tu controlador puedes hacer;

addHeader(form, header){
        let self = this;
        form.$submitted = true;
        ... 
    }

Necesitas algo de CSS también;

.label-color {
            color: $gray-color;
        }
.has-error {
       .label-color {
            color: rgb(221, 25, 29);
        }
        .select2-choice.ui-select-match.select2-default {
            border-color: #e84e40;
        }
    }
.validation-message {
       font-size: 0.875em;
    }
    .max-width {
        width: 100%;
        min-width: 100%;
    }

Answer 6

Lo sé, es un poco tarde para responder, pero todo lo que tienes que hacer es forzar todas las formas. Eche un vistazo al siguiente fragmento:

angular.forEach($scope.myForm.$error.required, function(field) {
    field.$setDirty();
});

y luego puede verificar si su formulario es válido usando:

if($scope.myForm.$valid) {
    //Do something
}   

y finalmente, supongo que querrías cambiar tu ruta si todo se ve bien:

$location.path(''/somePath'');

Editar : el formulario no se registrará en el alcance hasta que el evento enviar sea desencadenante. Simplemente use la directiva ng-submit para llamar a una función y ajuste lo anterior en esa función, y debería funcionar.

Answer 7

Me gusta este enfoque al manejar la validación al hacer clic en un botón.

1. No hay necesidad de invocar nada desde el controlador,

2. todo se maneja con una directiva.

en github

Answer 8

Nota: Sé que esto es un truco, pero fue útil para Angular 1.2 y versiones anteriores que no proporcionaban un mecanismo simple.

La validación se inicia en el evento de cambio , por lo que algunas cosas, como cambiar los valores mediante programación, no lo activarán. Pero desencadenar el evento de cambio activará la validación. Por ejemplo, con jQuery:

$(''#formField1, #formField2'').trigger(''change'');

Answer 9

Para validar todos los campos de mi formulario cuando quiero, realizo una validación en cada campo de controles $$ como este:

angular.forEach($scope.myform.$$controls, function (field) {
    field.$validate();
});

Answer 10

Puedes intentar esto:

// The controller

$scope.submitForm = function(form){
     //Force the field validation
     angular.forEach(form, function(obj){
      if(angular.isObject(obj) && angular.isDefined(obj.$setDirty))
      { 
       obj.$setDirty();
      }
     })
        
        if (form.$valid){
  
   $scope.myResource.$save(function(data){
        //....
   });
  }
}

<!-- FORM -->

  <form name="myForm"  role="form" novalidate="novalidate">
<!-- FORM GROUP to field 1 -->
  <div class="form-group" ng-class="{ ''has-error'' : myForm.field1.$invalid && myForm.field1.$dirty }">
      <label for="field1">My field 1</label>
        <span class="nullable"> 
        <select name="field1" ng-model="myresource.field1" ng-options="list.id as list.name for list in listofall"
          class="form-control input-sm" required>
            <option value="">Select One</option>
        </select>
        </span>
        <div ng-if="myForm.field1.$dirty" ng-messages="myForm.field1.$error" ng-messages-include="mymessages"></div>
  </div>
    
<!-- FORM GROUP to field 2 -->
  <div class="form-group" ng-class="{ ''has-error'' : myForm.field2.$invalid && myForm.field2.$dirty }">
    <label class="control-label labelsmall" for="field2">field2</label> 
      <input name="field2" min="1" placeholder="" ng-model="myresource.field2" type="number" 
      class="form-control input-sm" required>
    <div ng-if="myForm.field2.$dirty" ng-messages="myForm.field2.$error" ng-messages-include="mymessages"></div>
  </div>

  </form>

<!-- ... -->
<button type="submit" ng-click="submitForm(myForm)">Send</button>

Answer 11

Puedes usar Angular-Validator para hacer lo que quieras. Es estúpido simple de usar.

Va a:

• Solo valide los campos en $dirty o en submit
• Impedir que se envíe el formulario si no es válido
• Mostrar mensaje de error personalizado después de que el campo esté $dirty o se $dirty el formulario

Vea la demostración

Ejemplo

<form angular-validator 
       angular-validator-submit="myFunction(myBeautifulForm)"
       name="myBeautifulForm">
       <!-- form fields here -->
    <button type="submit">Submit</button>
</form>

Si el campo no pasa el validator , el usuario no podrá enviar el formulario.

Consulte ejemplos de uso del validador angular y ejemplos para obtener más información.

Descargo de responsabilidad: soy el autor de Angular-Validator

Answer 12

Un enfoque es forzar que todos los atributos estén sucios. Puedes hacer eso en cada controlador, pero se vuelve muy complicado. Sería mejor tener una solución general.

La forma más fácil que podía pensar era usar una directiva

• manejará el atributo de envío de formulario
• itera a través de todos los campos de formulario y marca campos prístinos sucios
• comprueba si el formulario es válido antes de llamar a la función de envío

Aquí está la directiva

myModule.directive(''submit'', function() {
  return {
    restrict: ''A'',
    link: function(scope, formElement, attrs) {
      var form;
      form = scope[attrs.name];
      return formElement.bind(''submit'', function() {
        angular.forEach(form, function(field, name) {
          if (typeof name === ''string'' && !name.match(''^[/$]'')) {
            if (field.$pristine) {
              return field.$setViewValue(field.$value);
            }
          }
        });
        if (form.$valid) {
          return scope.$apply(attrs.submit);
        }
      });
    }
  };
});

Y actualice su formulario html, por ejemplo:

 <form ng-submit=''justDoIt()''>

se convierte en:

 <form name=''myForm'' novalidate submit=''justDoIt()''>

Vea un ejemplo completo aquí: http://plunker.co/edit/QVbisEK2WEbORTAWL7Gu?p=preview

Answer 13

Lo que funcionó para mí fue usar la función $setSubmitted , que primero aparece en los documentos angulares en la versión 1.3.20.

En el evento click donde quería activar la validación, hice lo siguiente:

vm.triggerSubmit = function() {
    vm.homeForm.$setSubmitted();
    ...
}

Eso fue todo lo que necesité. Según los documentos, "establece el formulario en su estado enviado". Se menciona here .