stateparams - Validación de formulario AngularJS: $ cambio de valor sucio a través de cambios de estado de ui.router

ui router nested views

Question

Mi caso de uso:

Tengo un formulario de varios pasos usando ui-router como en el plunkr a continuación. Uso ng-form para validar la información proporcionada por AngularJS, como $ valid, $ dirty etc.

Después de cada clic en el botón "Siguiente sección", envío los datos del formulario al servidor para recuperarlos, en caso de que el usuario abandone el formulario antes de finalizar.

Si el usuario envía el primer paso dos veces, SOLAMENTE envío los datos editados (si el valor $ dirty es verdadero). Todo esto no está en el plunkr, elegí mostrarle un formulario simple, pero mi formulario puede contener cientos de campos (radio, casilla de verificación, entrada, seleccionar, etc.).

Los pasos para reproducir el problema (plunkr):

1. Completa el paso 1 y ve a la siguiente sección
2. Verifique la radio xbox y regrese al paso 1 haciendo clic en el número myMultiStepForm.interests.xbox.$dirty = true
3. Regrese al paso 2 myMultiStepForm.interests.xbox.$dirty = false

¿Por qué se cambia $ dirty value a false? Supongo que es porque la <ng-form> se muestra de nuevo y todos los datos de validación se restablecen.

Hay alguna manera de evitar esto ? ¿O tal vez algo más que <ng-form> para manejar la validación de subconjuntos de campos?

Este es el plunkr: http://plnkr.co/edit/WclqVgiBvUXlsGdSCcj0?p=preview

Answer 1

Cuando vincula un formulario o cualquier controlador dentro de él, siempre comienza como $pristine . La razón es que los modelos como formData.type simplemente tienen algunos valores, angular no tiene forma de saber que esos valores eran el estado predeterminado, provenientes del servidor o que son el resultado de una interacción previa del usuario; son una string simple o algo sin este tipo de metadatos adjuntos.

Para lograr lo que desea, debe realizar un seguimiento manual del estado $dirty en las transiciones de estado y aplicar $setDirty en el formulario cuando sea necesario.

Aquí hay un ejemplo rápido, agregando un controlador a las páginas del paso de formulario, que guarda el estado del formulario al salir (a una instancia de servicio compartido, puede agregarlo a través de la resolve también) y lo restaura en la construcción. El formPage actual se inyecta a través de un valor de parámetro predeterminado para que el mismo controlador se pueda usar para todos los pasos.

// router:

$stateProvider.state(''form.interests'', {
  url: ''/interests'',
  controller: ''FormStepController'',  
  params: { formPage: ''interests''}
  templateUrl: ''form-interests.html''
})

// state

angular.value("formDirtyState", {});

// controller

angular.controller("FormStepController", function($scope, formDirtyState, $stateParams) {
  var formPage = stateParams.formPage;

  for(var formField in $scope.myMultiStepForm[formPage]) {
    if(formDirtyState[formPage] && formDirtyState[formPage][formField])
      $scope.myMultiStepForm[formPage][formField].$setDirty()
  }
    

  $scope.$on("$destroy", function() { 
    for(var formField in $scope.myMultiStepForm[formPage])
      formDirtyState[formField] = $scope.myMultiStepForm[formPage][formField].$dirty;
  })

})

Answer 2

Lo resolví y la solución está en el siguiente plunker.

Refiriéndose a esto:

Nota: el propósito de ngForm es agrupar los controles, pero no ser un reemplazo de la etiqueta con todas sus capacidades (por ejemplo, publicar en el servidor, ...).

según la documentación angular para el elemento ngForm .

También me pregunto por qué estás usando muchos elementos <ng-form> . Esta es la única solución posible para su problema.

Plunker Modified

Actualización 1:

Explicación por $ dirty

$ dirty se establece en verdadero solo si el usuario interactuó con ese elemento en particular en el alcance actual.

Si eres tan particular con el problema verdadero / falso

• Te sugiero que reemplaces $ dirty por $ pristine

Actualización 2:

¿Por qué el valor no es verdadero cuando navegas de nuevo?

Cuando navega de una forma a otra, el alcance de la forma ng de ese elemento particular se agrega al controlador principal, cuando la misma forma ng se visita nuevamente, se anula con la de la existente.