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

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

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

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

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

Пример JSFiddle

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

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


angularjs angularjs-scope
person Michael Moussa    schedule 04.04.2013    source источник
comment
Формы могут вкладываться в angular, а дочерняя форма, ставшая недействительной, должна сделать родительскую форму недействительной. Но у вас, похоже, нет внешней формы, окружающей вашу форму, включенную в ng...   -  person jpsimons    schedule 05.04.2013
comment
Вложенные теги ‹form› недействительны HTML: stackoverflow.com/questions/4519485/. Хотя технически это работает в скрипте, оно будет вести себя непредсказуемо в зависимости от браузера (пример: Chrome просто съедает внутреннюю форму и избавляется от всех стилей).   -  person Michael Moussa    schedule 09.04.2013

Ответы (2)


arrow_upward
15
arrow_downward

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

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

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

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

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

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

person joakimbl    schedule 09.04.2013
comment
Первый вариант мне не подойдет, потому что это многостраничная форма, где каждую подчиненную форму нужно проверять независимо. Однако вложение с помощью директивы ng-form в форме атрибута (вместо вложения фактических тегов <form>) работает отлично! Часть $parent была просто плохим примером — у меня есть реальный объект, к которому она привязана. Вот лучший пример полного решения, которое я буду использовать: JSFiddle. Спасибо! - person Michael Moussa; 09.04.2013
comment
Ага... но что, если ваша форма находится внутри модального диалогового окна и у вас не может быть внешней формы? - person Ian Warburton; 21.08.2013
comment
Я думаю, что это настоящая слабость Angular. Они проверяют элементы формы, а не модель. Поэтому, если вы хотите определить несколько форм для одной и той же модели, вам придется повторить всю логику проверки. - person Ian Warburton; 21.08.2013

arrow_upward
25
arrow_downward

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

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

<form name="myFormHolder.myForm">

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

$scope.myFormHolder = {};

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

$scope.myFormHolder.myForm.$pristine

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

person Scott Driscoll    schedule 16.05.2014
comment
это больше похоже на приемлемый ответ. очень полезно спасибо! - person gabereal; 23.07.2015
comment
Это отлично решило мою проблему. У меня есть html-шаблоны, заполненные с помощью директивы, связанной с ng-repeat, каждый из которых является дочерней областью основного. Это было отличное решение, чтобы получить подтверждение для отображения. - person mortey; 09.12.2015
comment
Это довольно чистый способ сделать это. - person Skrew; 23.05.2017