AngularJS在AngularJS中使用netsted表单的动机

我试图找到在Angular中使用嵌套形式的一个令人信服的理由。 为什么我应该使用嵌套表单而不是使用1表单？ 此外，关于生成动态输入指令的ng repeat reason，我可以使用$index来显示错误消息

提前谢谢

嵌套表单非常有用，例如，如果需要确定控件子组的有效性

示例：
您需要在购买表单中添加发货地址。如果用户选择“发送到我的账单地址”选项，则您已设置。如果他选择“发送到另一个地址”选项，您将需要其他信息来了解发送地址。然后，您需要将select和其他字段以单独的形式括起来，其有效性将由自定义控制器计算

嵌套表单非常有用，例如，如果需要确定控件子组的有效性

示例：

---

您需要在购买表单中添加发货地址。如果用户选择“发送到我的账单地址”选项，则您已设置。如果他选择“发送到另一个地址”选项，您将需要其他信息来了解发送地址。然后，您需要将select和其他字段包含在一个单独的表单中，该表单的有效性将由自定义控制器计算。

主要原因是对嵌套表单的验证，ng表单可帮助您完全分离此表单

所以您可以使用可重用的表单，它是指令，然后ng表单允许您处理它的验证，而不需要知道父表单的存在

然后，您可以使用ng repeat中的表单，轻松地处理当前迭代的字段。如果不使用ng形式，这将非常困难。您不想用$index处理任何内容

您可以在这里看到示例- 有一个表单有名称，可以有多个联系人（不要害怕捷克验证消息）

form.$valid:{{ctrl.form.$valid}
联系人列表名称：

联系人{{index}的nestedForm
nestedForm.$valid:{{nestedForm.$valid}}
姓名：
Vyplňte jméno
电话：
Vyplňtečslo
去除
添加
奥德斯特拉特

主要原因是对嵌套表单的验证，ng表单可帮助您完全分离此表单

所以您可以使用可重用的表单，它是指令，然后ng表单允许您处理它的验证，而不需要知道父表单的存在

然后，您可以使用ng repeat中的表单，轻松地处理当前迭代的字段。如果不使用ng形式，这将非常困难。您不想用$index处理任何内容

您可以在这里看到示例- 有一个表单有名称，可以有多个联系人（不要害怕捷克验证消息）

form.$valid:{{ctrl.form.$valid}
联系人列表名称：

联系人{{index}的nestedForm
nestedForm.$valid:{{nestedForm.$valid}}
姓名：
Vyplňte jméno
电话：
Vyplňtečslo
去除
添加
奥德斯特拉特

您确定要检查控制器的有效性吗？Angular具有很好的验证能力。@VíťaPlšek-Angular.cz这实际上超出了我的知识范围，我一直使用基于字段的验证，并试图从文档中了解如何定义表单有效性。如果你知道的更好，请告诉我，我会编辑我的答案！分离的主要问题是正确的，随它去吧。只是为了提供信息，Angular对模板采用声明性方法，所以验证也是声明性的——它们只是附加到输入字段的指令。然后，如果您正确地设置了验证，那么您的字段和表单将获得$dirty、$invalid、$submited等属性，并将样式传播到css类@VíťaPlšek-angular.cz是的，但这并不能解释如何使用表单有效性来确定angular文档中所述的控件子组的有效性I LinkedIn您确定要与控制器检查有效性吗？Angular具有很好的验证能力。@VíťaPlšek-Angular.cz这实际上超出了我的知识范围，我一直使用基于字段的验证，并试图从文档中了解如何定义表单有效性。如果你知道的更好，请告诉我，我会编辑我的答案！分离的主要问题是正确的，随它去吧。只是为了提供信息，Angular对模板采用声明性方法，所以验证也是声明性的——它们只是附加到输入字段的指令。然后，如果您正确地设置了验证，那么您的字段和表单将获得$dirty、$invalid、$submited等属性，并将样式传播到css类@VíťaPlšek-angular.cz是的，但这并不能解释如何使用形式有效性来确定我链接的angular doc中所述的控件子组的有效性。你为什么说很难使用$index？只需写下：确定，然后命名字段。。。所以你会无缘无故得到不太好的代码。你真的不想那样做。这很难阅读和维护。这不是jquery，您不想寻址结构，而是要寻址数据。所以最重要的是，接触可以被视为独立的实体。在ng repeat中，您还连接到迭代的“局部”变量。这是一样的。最不重要的是，您可以使用nestedForm.$valid检查innerForm的有效性。为什么说很难使用$index？只需写下：确定，然后命名字段。。。所以你会无缘无故得到不太好的代码。你真的不想那样做。这很难阅读和维护。这不是jquery，您不想寻址结构，您想

<form class="form" name="ctrl.form" ng-submit="ctrl.save()" novalidate>

      <pre>form.$valid: {{ctrl.form.$valid}}</pre>
      <label>contacts list name:</label>
      <input name="name" ng-model="ctrl.contactList.name" />

      <hr />

      <fieldset class="well" ng-repeat="(index, contact) in ctrl.contactList.contacts" ng-form="nestedForm">

        <pre>
          nestedForm for contact {{index}}
          nestedForm.$valid: {{nestedForm.$valid}}</pre>

        <label>name:</label>
        <input name="contactName" type="text" ng-model="contact.name" required="" />
        <div ng-show="nestedForm.contactName.$error.required">
          Vyplňte jméno
        </div>

        <label>phone:</label>
        <input name="contactPhone" type="text" ng-model="contact.phone" required="" />
        <div ng-show="nestedForm.contactPhone.$error.required">
          Vyplňte číslo
        </div>

        <button type="button" ng-click="ctrl.removeContact(index)">remove</button>
      </fieldset>

      <button type="button" ng-click="ctrl.addContact()">add</button>
      <button type="submit">Odeslat</button>
    </form>