Ui router вложенные представления: как проверить общую форму?

Question

Доступен plunker here

Я использую угловые ui-router вложенных представления для реализации формы многоступенчатого (своего рода мастер), и я возник проблемы, пытаясь проверить форму. Форма разделяется во всех вложенных представлениях, но похоже, что валидация влияет только на представление newsted, в котором помещена кнопка отправки.

Вложенные просмотров:

$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' 
    }); 

У меня есть один нужный вход в каждой вложенной зрения:

форм-step1.html:

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

форм-step2. html:

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

В этом вложенном виде (Лас шаг моего мастера) У меня также есть кнопки отправки, отключен, если форма не является действительным:

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

Ну, проверка работает отлично для ввода этот взгляд, но не имеет в виду ввод предыдущего представления (form-step1.html). Поскольку форма одинакова для всех представлений, я ожидаю, что вход requrired1 также должен быть проверен. Однако, хотя вход requrired1 пуст, форма считается действительной.

Итак, мой вопрос: как я могу проверить форму, учитывая входы всех вложенных представлений?

Заранее благодарим за помощь.

Answer 1

Хорошо, подумав об этом, я думаю, что самый простой выбор здесь - проверить каждый шаг формы (вложенное представление) индивидуально.

Итак, пока форма не действительна для детерминированного вложенного зрения (формы-step1), кнопка для перехода к следующему шагу (формы-step2) показывает инвалид. Если мы поступим таким образом, когда мы дойдем до последнего вложенного представления (form-step2 в случае OP, в котором содержится кнопка отправки), мы уже проверили все предыдущие шаги формы. Таким образом, нам просто нужно проверить форму для текущего вложенного представления, чтобы гарантировать, что вся форма действительна.

Обновленный форм-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 here.