Forms AngularJS-如何触发嵌套表单中的提交

我正在构建一个表单，在提交时生成邀请。邀请有多个字段，其中一个是带有“添加”按钮的电子邮件地址输入，单击该按钮时，应将该地址添加到应接收邀请的电子邮件地址列表中

这可以通过单个表单完成，但是如果用户在键入电子邮件时按enter键，则会在整个表单上触发

submit

。我想让enter键结果（当电子邮件输入字段处于焦点时）与单击“添加”按钮具有相同的效果。我认为解决这个问题的正确方法是在邀请表单中嵌套一个电子邮件条目表单，类似这样：

    <ng-form ng-submit="sendInvite()">
        <input type="text" placeholder="Title" ng-model="invitation.title"/>

        <ng-form ng-submit="addInvitee()">
            <input type="email" placeholder="Title" ng-model="inviteeEmail"/>
            <button class="btn" type="submit">add</button>
        </ng-form>

        <button class="btn" type="submit">Send</button>
    </ng-form>

我的问题是嵌套表单（并在这样做时从

转换为

），提交任何一个表单都不再有效

您可以使用以下两种方法之一指定提交表单时应调用的javascript方法：
*表单元素上的ngSubmit指令
*ngClick指令在第一个按钮或类型为submit的输入字段上（输入[type=submit]）
--

添加



{{invitee.email}


发送

---

我有类似的需求-向导驱动的多步骤表单。当用户单击“下一步”按钮时，我必须验证当前步骤表单

我们可以通过在绑定到表单的

范围上触发“
$validate
”事件来触发验证

isFormValid = function($scope, ngForm) {
    $scope.$broadcast('$validate');
    if(! ngForm.$invalid) {
      return true;
    }
}

当我想要检查表单值是否正确时，我将使用scope&form实例调用
isFormValid

工作代码：

在
isFormValid
中添加一些附加逻辑也很有用（包括在上面的插件中）这使得表单和表单字段
$dirty
与我们根据其
$dirty
状态显示/隐藏验证消息的方式相同。
提交表单时，您可以使用以下方法查找所有嵌套表单

forms = []
forms.push(form)
nestedForms = _.filter(_.values(form), (input) -> (input instanceof form.constructor) and (input not in forms))

在这里，表单是提交的外部表单控制器。您可以将此代码挂接到您的onsubmit上，然后查找所有嵌套表单并执行您必须执行的任何操作

注意：这是coffeescript
验证表单并提供提示…“您正在提交…”如果它们不是doneThanks，则有可能取消，这当然是缓解问题的一种方法，但这不是理想的行为。还可以防止
在字段处于焦点时输入
默认值。将键处理程序绑定到字段并取消模糊绑定。无法嵌套表单键处理程序可能是一种解决方法。但您为什么说“无法嵌套表单”？是专门为此目的创建的。my bad…不知道
ng form
的嵌套功能。HTMLTanks中的新概念，这是对我的改进，但它根本不响应
enter
键事件。经过一些修改后，
和
元素似乎没有那么一致正如文档所说的那样，cal。我尝试了不同的
form
、
ng form
和
ng submit
配置，但都无济于事。您知道我如何获得对我最初描述的
enter
键事件的条件响应吗？（键处理程序或自定义指令除外）@JamieA，很抱歉我错过了关于回车键的部分（我拉了你的Plunker并修改了它，但我只测试了点击按钮）。我想你需要创建一个指令来获得你想要的功能。内部提交在这里什么都不做。这是因为ng单击。Angular似乎不想在内部表单上使用提交。正常工作的提交可以利用ng提交。内部提交不能。我想否决这个答案，但我没有eno呃，就像Marc说的submit没有做任何事情，它只是因为ng的点击才起作用。我编辑了答案并删除了
type=“submit”
来自两个按钮元素的属性。基于plunker代码，我建议您也切换
$pristine
状态，因为当您设置
$dirty
字段时，它不会自动移动。做得好，感谢您的解决方案！在撰写本文时（AngularJS<1.2），没有简单的方法重置
$pristine
状态。我们可以重置特定控件或窗体的
$pristine
状态。但是，如果其窗体或其父窗体中的任何其他控件也是
$pristine
，我们还需要传播该更改。这涉及更多内容。从1.2开始，有一种方法用于在：
$setPristine（..）
。
isFormValid = function($scope, ngForm) {
    $scope.$broadcast('$validate');
    if(! ngForm.$invalid) {
      return true;
    }
}

forms = []
forms.push(form)
nestedForms = _.filter(_.values(form), (input) -> (input instanceof form.constructor) and (input not in forms))