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);

当用户单击 save 时，我验证表单，然后检查是否存在任何验证问题。如果没有，我检查表单是否包含数据并将过滤后的模型发送到服务器。

这是每个联系表单中的验证部分：

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

问题在于，$scope.contactForm有时是undefined。 当我删除第1行时，之后的所有表单（1,2,3 ......）都无法再访问contactForm $scope.model[...]状态

  

如果指定了name属性，则发布表单控制器   以此名称加入当前范围。

- 我做了。另一个问题是模型也被清除了那些表格行（我认为它们再次被初始化）。 html输出工作正常，但INCLUDE_DIRECTORIES( . ) 为空 - 并且它们不会发送到服务器。

我做错了什么？对于这种或另一种处理动态表单的可能性，是否有任何解决方法？

Answer 1

作为此问题的解决方法，我目前正在使用此方法：

要删除表单，请＆＃34;标记＆＃34;它没有：

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()，...）都会检查该行是否存在，如果不存在则忽略该表单。

但是，此解决方法不支持重新排序。