如何在嵌套表单中触发submit

I'm building a form that generates an invitation when submitted. The invitation has several fields, one of which is an email address input with an 'add' button, which when clicked should add that address to a list of email addresses that should receive the invite.

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

This can be done with a single form, however if the user hits the enter key while typing an email then it triggers submit on the whole form. I'd like to have the enter key result - when the email input field is focused - have the same effect as clicking the 'add' button. I expected that the proper way to solve this would be to nest an email entry form within the invitation form, something like this:

这可以通过一个表单来完成，但是如果用户在输入电子邮件时点击了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>

With the following javascript in the controller:

控制器中有如下javascript:

    $scope.addInvitee = function() {
        $scope.invitation.emails.push($scope.inviteeEmail);
        $scope.inviteeEmail = '';
    }

    $scope.sendInvite = function() {
        //code to send out the invitation
    }

My problem is that having nested the forms (and in doing so converted from <form> to <ng-form>, submitting either one no longer works.

我的问题是嵌套了表单(在这样做的过程中，从

Plunker here

恰好在这里

3 个解决方案

#1

I've similar requirement - wizard driven multi-step form. When user clicks 'Next' button, I've to validate the current step form.

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

We can trigger validation by firing '$validate' event on the scope bound to the form.

我们可以通过在绑定到窗体的范围上触发“$validate”事件来触发验证。

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

When ever I want to check if the form values are correct, I'll call isFormValid with the scope & form instance.

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

Working code: Plunker link

工作代码:恰好链接

It is also useful to have few additional logic in isFormValid (included in the above Plunker) which makes the form & form fields $dirty as we would be showing/hiding validation messages based on their $dirty state.

在isFormValid(包括在上面的柱塞中)中有一些附加逻辑也很有用，这些逻辑使得表单和表单字段为$dirty，因为我们将根据它们的$dirty状态显示/隐藏验证消息。

#2

You can use one of the following two ways to specify what javascript method should be called when a form is submitted:
* ngSubmit directive on the form element
* ngClick directive on the first button or input field of type submit (input[type=submit])
-- form docs

您可以使用以下两种方法之一来指定提交表单时应该调用什么javascript方法:* ngSubmit指令对表单元素* ngClick指令的第一个按钮或类型submit (input[type=submit])的输入字段——表单文档

<ng-form>
   <input type="text" placeholder="Title" ng-model="invitation.title"><br>
   <ng-form>
     <input type="email" placeholder="Title" ng-model="inviteeEmail">
     <button class="btn" ng-click="addInvitee()">add</button><br>
   </ng-form>
   <ul class="unstyled">
     <li ng-repeat="invitee in invitation.invitees">
        <span>{{invitee.email}}</span>
     </li>
   </ul>
   <button class="btn" ng-click="sendInvite()">Send</button>
</ng-form>

Plunker

砰砰作响

#3

When the form is submitted, you can find all nested forms using some thing like below

当表单提交时，您可以使用如下所示的内容找到所有嵌套的表单

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

Here, form is the outer form controller which was submitted. You can hook this code on ur onsubmit, and find all nested forms and do whatever you have to.

在这里，表单是提交的外部表单控制器。您可以将此代码挂接到您的onsubmit上，并找到所有嵌套的表单，并做您必须做的任何事情。

Note: This is coffeescript

注意:这是coffeescript

#1