Как я могу проверить действительность формы ng-включенного из родительской области?

У меня есть подчиненная форма, которая разделяется между несколькими представлениями в моем приложении. В одном представлении эта подформация отображается отдельно с кнопкой "Назад/Продолжить" внизу, которая ведет пользователя к следующей подформе. В другом представлении субформа отображается на той же странице, что и другие подформы (в основном одна длинная форма).

Так как html подформы на 100% идентичен в обоих представлениях, я разделил его на частичный и использую ng-include для его рендеринга. В представлении, которое отображает только подчиненную форму с кнопками back/continue, я визуализую кнопки back/continue в родительском HTML.

Визуально все работает нормально, и я могу получить доступ ко всем данным, введенным в форме (user.email, user.password, user.etc...).

Проблема заключается в том, что я включаю/выключаю кнопку "продолжить" на основе того, правильно ли пользователь заполнил форму, и это не работает в варианте "только для подформы", поскольку родительская область не имеет значения, t, похоже, имеет доступ к статусу формы. Если я придерживаюсь кнопок в частичном, это работает, но я не хочу этого делать, потому что кнопки не принадлежат там, в каждом экземпляре, который используется в этом частичном выражении.

Пример JSFiddle

Обратите внимание, в моем примере, что кнопка отправки на красной рамке отключена до тех пор, пока в поле не появится что-то, а "Форма недействительна?" обновления, в то время как кнопка в синей рамке всегда включена и "Форма недействительна?" значение пустое.

Как я могу получить доступ к значению myForm.$invalid из родительской области?

Ответ 1

Если это субформа, вы можете просто перенести тэг формы из подформы и в основную форму: обновленный JSFiddle

Вы также можете вложить свои формы, используя ngForm-директиву:

В angular формы могут быть вложенными. Это означает, что внешняя форма действительна, когда все дочерние формы также действительны. Однако браузеры не допускают вложенности элементов, поэтому angular предоставляет псевдоним ngForm, который ведет себя одинаково, но допускает вложение форм.

Результат - немного грязный imo. Я бы предпочел создать директиву "myForm" с новой областью, чтобы избежать использования $parent - что-то вроде:

myApp.directive('myForm',function(){
    return{ 
        restrict:'E',
        scope:{model:'='},
        templateUrl:'/form.html',
        replace:true
    }
});

- см. этот пример JSFiddle

Ответ 2

Объём дочернего объекта, созданный при использовании ng-include, скрывает функции формы от родителя.

В дополнение к использованию директивы вы также можете добавить объект в родительский элемент, но важно установить имя формы для объекта с таким свойством:

<form name="myFormHolder.myForm">

и в родительском контроллере

$scope.myFormHolder = {};

тогда должно работать следующее:

$scope.myFormHolder.myForm.$pristine

Таким образом, когда форма оценивается, myForm. $valid будет установлен на родительском. Я полагаю, что я задал этот же вопрос: Зачем формировать undefined внутри ng-include при проверке $pristine или $setDirty()?