javascript - validacion - ¿Cómo limpiar correctamente el formulario con la entrada no válida del controlador AngularJS?

validar formulario angular 5

Question

Tengo un formulario AngularJS que contiene, entre otros campos, uno de tipo url . Esto último es importante ya que obliga a la entrada correspondiente a ser una URL válida.

En determinadas condiciones (por ejemplo, se debe cerrar un diálogo modal con dicho formulario), quiero borrar ese formulario de forma programática. Para tal fin, implementé la reset métodos que básicamente borra el modelo de formulario correspondiente al establecer $scope.formData = {} . Por lo tanto, establece el modelo de formulario a un nuevo objeto en blanco.

Si bien esa asignación borra todos los campos válidos en el formulario HTML procesado, no borra los campos no válidos , como una URL no válida. Por ejemplo, si el usuario proporciona una entrada no válida ht://t/p como URL, esa entrada no se eliminará del formulario procesado.

Creo que esto se debe al hecho de que el modelo no refleja ninguna URL no válida, una URL inválida simplemente no "la haría" al modelo porque no pasa la validación en la NgModelController#$parsers . Por lo tanto, en el modelo, no hay ninguna URL en absoluto. En consecuencia, al restablecer el modelo de formulario a {} no se puede cambiar la URL del modelo, ya que aún no se ha establecido.

Sin embargo, si el reset método establece explícitamente el campo $scope.formData.url = "" , la URL no válida se borrará correctamente (al menos, el formulario procesado ya no se mostrará). Esto es causado por el cambio explícito de la URL en el modelo. Sin embargo, ahora, la variable de modelo formData.url contiene la cadena vacía (bueno, no es sorprendente), mientras que al usar = {} , todos los campos serían undefined lugar.

Aunque asignar campos individuales a "" funciona como una solución alternativa para formularios simples, rápidamente resulta engorroso para formularios más complejos con muchos campos.

Por lo tanto, ¿cómo podría reiniciar programáticamente el formulario de manera eficiente y efectiva, incluidos todos los campos de entrada no válidos?

Creé un Plunker en http://plnkr.co/c2Yhzs donde puede examinar y ejecutar un ejemplo completo que muestra el efecto anterior.

Answer 1

Creo que esta solución es moderadamente elegante: tu plnkr revisado
La gran diferencia es la inicialización de su objeto modelo.

Creo que las cosas se confunden cuando una variable se vuelve indefinida, ya no se actualiza ... debe estar conectada (veeeery) profundamente con la forma en que funciona la validación ( enlace a documentos )

Regresar undefined en ese caso hace que el modelo no se actualice, creo que esto es exactamente lo que sucede detrás de la cortina

PD: puedes reciclar de manera resetImplicitly - resetImplicitly todos tus formularios en la aplicación web :)

Answer 2

Después de intentar varias respuestas sin éxito en preguntas similares, esto funcionó para mí.

En mi controlador:

$scope.cleanForm = function() {
  $scope.myFormName.$rollbackViewValue();
};

Simplemente llame con algunos ng-click o de la forma que desee.

Aclamaciones

Answer 3

Especifique el tipo de su botón como reinicio. Eso no solo llamará a la función ngClick, sino que también borrará el contenido del formulario HTML.

<button type="reset" ng-click="resetFormData()">Reset</button>

Answer 4

Los campos de formulario de URL se pasan al modelo solo si son válidos. Por lo tanto, en el caso de una entrada url-invierta en el formulario, la variable de ámbito no se asigna al modelo y borrar la entrada de formularios asignando un objeto vacío al modelo aún persistirá el valor en el frente de la interfaz de usuario.

La mejor alternativa a esto es asignar el modelo asociado con los datos del formulario con un nulo. Una respuesta similar aparece aquí:

https://.com/a/18874550/5065857

Answer 5

Probablemente necesites hacer una copia del modelo en su estado prístino y configurar el modelo para que sea prístino cuando reinicies.

Hay un buen ejemplo aquí:

http://www.angularjshub.com/examples/forms/formreset/

Answer 6

The Thing is tag es de tipo "url", lo que significa que si el usuario ingresa específicamente una URL válida, solo se establecerán los valores del modelo.

Si el usuario lo reiniciará explícitamente, lo que significa que establecer valores de modelo en "" volverá a hacer que el cuadro de texto esté vacío.

Parece que está configurando los valores, pero en realidad no, por lo que cuando establece su valor en "" .Angular establecerá el valor modal en "" Vamos a tomar otro ejemplo: poner reemplazar "texto" por "correo electrónico"

<input type="email" ng-model="formData.name" />
      <br />URL:
      <input type="url" ng-model="formData.url" />
      <br />

En el código anterior Si ingresa un correo electrónico no válido, no establecerá los valores del modelo del correo electrónico.

Answer 7

ng-click = "formData = {};"

solo dale así,

<button ng-click="formData={}">(1) Reset Full Data: formData = {}</button>

Restablezca los datos de su formulario directamente en ng-click.