AngularJS - динамические формы не могут получить доступ к FormController

Question

Один клиент может иметь несколько контактных данных. Для того, чтобы модель дружественный пользовательский HTML-форму, я использую структуру, подобную этой:

<div> 
    <customer-form/>  <!-- single <form> element containing general customer information like name and address --> 
    <contact-form  <!-- multiple <form> elements containing contact data--> 
     ng-repeat="data in model track by $rowNumber" 
     model="data" /> 
</div> 

графического вывода контактной формы:

Как это работает:

• Когда пользователь вводит данные в последнюю строку, запускается $scope.model.push({});, который автоматически добавляет новую строку
• Когда кнопка X нажата, текущая строка удаляется с $scope.model.splice(rowNumber, 1);

Когда пользователь щелкает сохранить, я проверить правильность формы, а затем проверить, есть ли какие-либо проблемы проверки. Если нет, я проверяю, содержит ли форма данные и отправляет фильтрованную модель на сервер.

Это часть проверки внутри каждой контактной формы:

$scope.isValid = function (index){ 
    return !$scope.contactForm.$invalid; 
}; 

Проблема здесь в том, что $scope.contactForm иногда undefined. При удалении строки номер 1, все формы впоследствии (1, 2, 3 ...) не могут получить доступ к contactForm больше, хотя docs состояния

Если указано имя атрибута, контроллер формы публикуется на текущую область под этим именем.

- который я сделал. Другая проблема заключается в том, что модель также очищается для этих строк-строк (я думаю, они снова инициализированы). Выход html работает нормально, но $scope.model[...] пуст - и они не отправляются на сервер.

Что я делаю неправильно? Существует ли какое-либо обходное решение для той или иной возможности иметь дело с динамическими формами?

Answer 1

В обходного для этого вопроса я в настоящее время, используя этот подход:

Чтобы удалить форму, я «знак» он не доступен:

function deleteForm(rowNumber){ 
    $scope.model[rowNumber] = null; 
} 

Следующей функция проверяет данная строка должна рассматриваться как удаленные или нет:

function isAvailable(rowNumber){    
    return $scope.model[rowNumber] != null; 
} 

Чтобы скрыть форму от пользователя, я использую ng-if:

<contact-form 
    ng-repeat="data in model track by $rowNumber" 
    ng-if="isAvailable($rowNumber)" 
    model="data" /> 

И каждая функция (isValid(), containsData(), ...) проверяет, является ли строка должна существовать и игнорирует форму, если нет.

Однако это обходное решение не поддерживает переупорядочение.