Vistas anidadas del enrutador Ui: ¿cómo validar un formulario compartido? - angularjs, formularios, validación, enrutador ui angular, vistas anidadas

Plunker disponible aquí

Estoy usando angular ui-router vistas anidadas para implementar un formulario de varios pasos (untipo de asistente) y tengo problemas para intentar validar el formulario. El formulario se comparte en todas las vistas anidadas, pero parece ser que la validación solo afecta la vista notificada donde se coloca el botón de envío.

Vistas anidadas:

$stateProvider
.state("form", {
url: "/form",
templateUrl: "form.html",
controller: "formController"
})

.state("form.step1", {
url: "/step1",
templateUrl: "form-step1.html"
})

.state("form.step2", {
url: "/step2",
templateUrl: "form-step2.html"
});

Tengo una entrada requerida en cada vista anidada:

form-step1.html:

<input type="text" name="required1" ng-model="formData.required1" required>

form-step2.html:

<input type="text" name="required2" ng-model="formData.required2" required>

En esta vista anidada (el último paso de mi asistente) también tengo el botón Enviar, deshabilitado si el formulario no es válido:

<button ng-disabled="form.$invalid" ng-submit="submit">Submit</button>

Bueno, la validación funciona bien para la entrada de esta vista, pero no tiene en cuenta la entrada de la vista anterior (form-step1.html). Como el formulario es el mismo para todas las vistas, espero esa entrada Requrired1 También debe ser validado. Sin embargo, aunque la entrada Requrired1 está vacío, el formulario se considera válido.

Entonces, mi pregunta es: ¿cómo podría validar un formulario teniendo en cuenta las entradas de todas las vistas anidadas?

Gracias de antemano por la ayuda.

Respuestas

1 para la respuesta № 1

Bueno, después de pensar un poco en esto, creo que la opción más fácil aquí es validar cada paso del formulario (vista anidada) individualmente.

Entonces, hasta que el formulario sea válido para una vista anidada determinada (form-step1), el botón para continuar con el siguiente paso (form-step2) se muestra deshabilitado. Si lo hacemos de esta manera, cuando lleguemos a la última vista anidada (form-step2 en el caso de OP, que contiene el botón de enviar),Ya hemos validado todos los pasos de formulario anteriores. Por lo tanto, solo tenemos que validar el formulario para la vista anidada actual para garantizar que todo el formulario sea válido.

Actualizado form-step1.html:

<div>
<label for="required1">Required 1</label>
<input type="text" name="required1" ng-model="formData.required1" required>
</div>

<div>
<button ng-disabled="form.$invalid" ui-sref="form.step2" type="button">Next</button>
</div>

Plunker actualizado aquí.

---