html - validacion - validar nombre javascript

¿Cómo puedo restablecer un formulario incluyendo la eliminación de todos los errores de validación?

Question

Tengo una forma angular. Los campos se validan utilizando el atributo ng-pattern . También tengo un botón de reinicio. Estoy usando la carpeta de eventos de Ui.Utils para manejar el evento de reset así:

<form name="searchForm" id="searchForm" ui-event="{reset: ''reset(searchForm)''}" ng-submit="search()">
  <div>
    <label>
      Area Code
      <input type="tel" name="areaCode" ng-model="areaCode" ng-pattern="/^([0-9]{3})?$/">
    </label>

    <div ng-messages="searchForm.areaCode.$error">
      <div class="error" ng-message="pattern">The area code must be three digits</div>
    </div>
  </div>

  <div>
    <label>
      Phone Number
      <input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/">
    </label>

    <div ng-messages="searchForm.phoneNumber.$error">
      <div class="error" ng-message="pattern">The phone number must be seven digits</div>
    </div>
  </div>

  <br>
  <div>
    <button type="reset">Reset</button>
    <button type="submit" ng-disabled="searchForm.$invalid">Search</button>
  </div>
</form>

Como puede ver, cuando se restablece el formulario, se llama al método de reset en $scope . Así es como se ve el controlador completo:

angular.module(''app'').controller(''mainController'', function($scope) {
    $scope.resetCount = 0;

    $scope.reset = function(form) {
        form.$setPristine();
        form.$setUntouched();
        $scope.resetCount++;
    };

    $scope.search = function() {
        alert(''Searching'');
    };
});

Estoy llamando al form.$setPristine() y al form.$setUntouched , siguiendo los consejos de otra pregunta aquí en Stack Overflow. La única razón por la que agregué el contador fue para probar que el código está siendo llamado (lo que es).

El problema es que incluso después de restablecer el formulario, los mensajes de validación no desaparecen. Puedes ver el código completo en Plunker . Aquí hay una captura de pantalla que muestra que los errores no desaparecen:

Answer 1

Así que ninguna de las respuestas funcionó completamente para mí. Esp, borrando el valor de la vista, así que combiné todas las respuestas borrando el valor de la vista, borrando los errores y borrando la selección con la consulta j (siempre que los campos sean ingresados ​​y tengan el mismo nombre que el nombre del modelo)

 var modelNames = Object.keys($scope.form).filter(key => key.indexOf(''$'') !== 0);
                    modelNames.forEach(function(name){
                        var model = $scope.form[name];
                        model.$setViewValue(undefined);
                        jq(''input[name=''+name+'']'').val('''');
                        angular.forEach(model.$error, function(value, name) {
                          // reset validity
                          model.$setValidity(name, null);
                        });
                    });
                    $scope.form.$setPristine();
                    $scope.form.$setUntouched();

Answer 2

Comencé con el comentario de @Brett y lo construí. De hecho, tengo varios formularios y cada formulario tiene muchos campos (más que solo los dos que se muestran). Así que quería una solución general.

Noté que el objeto de form angular tiene una propiedad para cada control (entrada, selección, área de texto, etc.), así como algunas otras propiedades angulares. Sin embargo, cada una de las propiedades de Angular comienza con un signo de dólar ( $ ). Así que terminé haciendo esto (incluido el comentario para el beneficio de otros programadores):

$scope.reset = function(form) {
    // Each control (input, select, textarea, etc) gets added as a property of the form.
    // The form has other built-in properties as well. However it''s easy to filter those out,
    // because the Angular team has chosen to prefix each one with a dollar sign.
    // So, we just avoid those properties that begin with a dollar sign.
    let controlNames = Object.keys(form).filter(key => key.indexOf(''$'') !== 0);

    // Set each control back to undefined. This is the only way to clear validation messages.
    // Calling `form.$setPristine()` won''t do it (even though you wish it would).
    for (let name of controlNames) {
        let control = form[name];
        control.$setViewValue(undefined);
    }

    form.$setPristine();
    form.$setUntouched();
};

Answer 3

Los siguientes me funcionaron

let form = this.$scope.myForm;   
let controlNames = Object.keys(form).filter(key => key.indexOf(''$'') !== 0);
for (let name of controlNames) {
    let control = form [name];
    control.$error = {};
}

En resumen: para deshacerse de los errores de ng-messages, debe borrar el objeto $ error para cada elemento del formulario.

Answer 4

No parece haber una manera fácil de restablecer los errores de $ en angular. La mejor manera probablemente sería recargar la página actual para comenzar con un nuevo formulario. Como alternativa, debe eliminar todos los $ errores manualmente con este script:

form.$setPristine(true);
form.$setUntouched(true);

// iterate over all from properties
angular.forEach(form, function(ctrl, name) {
  // ignore angular fields and functions
  if (name.indexOf(''$'') != 0) {
    // iterate over all $errors for each field        
    angular.forEach(ctrl.$error, function(value, name) {
      // reset validity
      ctrl.$setValidity(name, null);
    });
  }
});
$scope.resetCount++; 

Answer 5

Parece que tengo que hacer el comportamiento correcto en el reinicio . Desafortunadamente, el uso del reinicio estándar falló. Tampoco incluyo la biblioteca ui-event . Así que mi código es un poco diferente del tuyo, pero hace lo que necesitas.

<form name="searchForm" id="searchForm" ng-submit="search()">
  pristine = {{searchForm.$pristine}} valid ={{searchForm.$valid}}
  <div>
    <label>
      Area Code
      <input type="tel" required name="areaCode" ng-model="obj.areaCode" ng-pattern="/^([0-9]{3})?$/" ng-model-options="{ allowInvalid: true }">
    </label>

    <div ng-messages="searchForm.areaCode.$error">
      <div class="error" ng-message="pattern">The area code must be three digits</div>
      <div class="error" ng-message="required">The area code is required</div>
    </div>
  </div>

  <div>
    <label>
      Phone Number
      <input type="tel" required name="phoneNumber" ng-model="obj.phoneNumber" ng-pattern="/^([0-9]{7})?$/" ng-model-options="{ allowInvalid: true }">
    </label>

    <div ng-messages="searchForm.phoneNumber.$error">
      <div class="error" ng-message="pattern">The phone number must be seven digits</div>
      <div class="error" ng-message="required">The phone number is required</div>
    </div>
  </div>

  <br>
  <div>
    <button ng-click="reset(searchForm)" type="reset">Reset</button>
    <button type="submit" ng-disabled="searchForm.$invalid">Search</button>
  </div>
</form>

Y JS:

$scope.resetCount = 0;
$scope.obj = {};
$scope.reset = function(form_) {
  $scope.resetCount++;
  $scope.obj = {};
  form_.$setPristine();
  form_.$setUntouched();
  console.log($scope.resetCount);
};

$scope.search = function() {
  alert(''Searching'');
};

Ejemplo vivo en jsfiddle .

Tenga en cuenta la directiva ng-model-options="{allowinvalid: true}" . Úselo necesariamente, o hasta que el campo de entrada no sea válido, el valor del modelo no se registra. Por lo tanto, el reinicio no funcionará.

PS El valor de venta (areaCode, phoneNumber) en el objeto simplifica la purificación.

Answer 6

Puede agregar un indicador de validación y mostrar u ocultar errores según su valor con ng-if o ng-show en su HTML. El formulario tiene un indicador $ válido que puede enviar a su controlador.

ng-if eliminará o volverá a crear el elemento en el DOM, mientras que ng-show lo agregará pero no lo mostrará (según el valor del indicador).

EDITAR : Como señaló Michael, si el formulario está deshabilitado, la forma en que señalé no funcionará porque el formulario nunca se envió. Actualizado el código en consecuencia.

HTML

<form name="searchForm" id="searchForm" ui-event="{reset: ''reset(searchForm)''}" ng-submit="search()">
  <div>
    <label>
      Area Code
      <input type="tel" name="areaCode" ng-model="areaCode" ng-pattern="/^([0-9]{3})?$/">
    </label>

    <div ng-messages="searchForm.areaCode.$error">
      <div class="error" ng-message="pattern" ng-if="searchForm.areaCode.$dirty">The area code must be three digits</div>
    </div>
  </div>

  <div>
    <label>
      Phone Number
      <input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/">
    </label>

    <div ng-messages="searchForm.phoneNumber.$error">
      <div class="error" ng-message="pattern" ng-if="searchForm.phoneNumber.$dirty">The phone number must be seven digits</div>
    </div>
  </div>

  <br>
  <div>
    <button type="reset">Reset</button>
    <button type="submit" ng-disabled="searchForm.$invalid">Search</button>
  </div>
</form>

JS

$scope.search = function() {
    alert(''Searching'');
};

$scope.reset = function(form) {
     form.$setPristine();
     form.$setUntouched();
     $scope.resetCount++;
 };

Codepen con solución de trabajo: http://codepen.io/anon/pen/zGPZoB

Answer 7

Puede pasar su objeto loginForm a la función ng-click="userCtrl.login(loginForm) y en la llamada a la función

this.login = function (loginForm){
  loginForm.$setPristine();
  loginForm.$setUntouched();
}

Answer 8

Tuve el mismo problema e intenté hacer la solución battmanz (respuesta aceptada).

Estoy bastante seguro de que su respuesta es muy buena, pero para mí no funcionó.

Estoy usando ng-model para enlazar datos, y una biblioteca de material angular para las entradas y las directivas de ng-message para mensajes de error , así que quizás lo que diga sea útil solo para las personas que utilizan la misma configuración.

Miré mucho el objeto formController en javascript, de hecho, hay una gran cantidad de funciones $ angulares como anotó battmanz, y además hay nombres de campos, que son objetos con algunas funciones en sus campos.

Entonces, ¿qué está limpiando su formulario?

Normalmente veo un formulario como un objeto json, y todos los campos están vinculados a una clave de este objeto json.

//lets call here this json vm.form
vm.form = {};

//you should have something as ng-model = "vm.form.name" in your view

Así que al principio para borrar el formulario, acabo de hacer una devolución de llamada al enviar el formulario:

vm.form = {};

Y como se explica en esta pregunta, los mensajes ng no desaparecerán con eso, eso es realmente malo.

Cuando utilicé la solución battmanz tal como la escribió, los mensajes ya no aparecían, pero los campos ya no estaban vacíos después de enviarlos, incluso si escribí

vm.form = {};

Y descubrí que era normal, porque usar su solución en realidad elimina el enlace del modelo del formulario, porque establece que todos los campos están indefinidos. Así que el texto todavía estaba en la vista porque de alguna manera ya no habría ningún enlace y decidió permanecer en el HTML.

Entonces qué hice ?

En realidad, simplemente borro el campo (estableciendo el enlace en {}), y usé solo

form.$setPristine();
form.$setUntouched();

En realidad, parece lógico, ya que el enlace aún está aquí, los valores en el formulario ahora están vacíos, y la directiva angular ng-messages se está activando solo si el formulario no está intacto, así que creo que es normal después de todo.

El código final (muy simple) es que:

function reset(form) {
        form.$setPristine();
        form.$setUntouched();
};

Un gran problema que encontré con eso:

Solo una vez , la devolución de llamada parece haberse jodido en alguna parte, y de alguna manera los campos no estaban vacíos (fue como si no hubiera hecho clic en el botón de envío).

Cuando volví a hacer clic, la fecha de envío estaba vacía. Eso es aún más extraño porque se supone que mi botón de envío está deshabilitado cuando un campo requerido no está lleno con el buen patrón, y el vacío no es bueno.

No sé si mi manera de hacerlo es la mejor o incluso la correcta, si tiene alguna crítica / sugerencia o alguna reflexión sobre el problema que encontré, por favor, hágamelo saber, siempre me gusta avanzar en Angular JS.

Espero que esto ayude a alguien y perdón por el mal inglés.

Answer 9

más allá de la respuesta de @battmanz, pero sin usar ninguna sintaxis de ES6 para admitir navegadores más antiguos.

 $scope.resetForm = function (form) {

            try {
                var controlNames = Object.keys(form).filter(function (key) { return key.indexOf(''$'') !== 0 });

                console.log(controlNames);
                for (var x = 0; x < controlNames.length; x++) {
                    form[controlNames[x]].$setViewValue(undefined);
                }

                form.$setPristine();
                form.$setUntouched();
            } catch (e) {                
                console.log(''Error in Reset'');
                console.log(e);
            }

        };

Answer 10

      $scope.search = {areaCode: xxxx, phoneNumber: yyyy}

Estructure todos los modelos en su formulario en un lugar como el de arriba, para que pueda borrarlo así:

      $scope.search = angular.copy({});

Después de eso, puedes llamar a esto para restablecer la validación:

      $scope.search_form.$setPristine();
      $scope.search_form.$setUntouched();
      $scope.search_form.$rollbackViewValue();