Question

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

这可以使用单个表单完成，但是如果用户在键入电子邮件时按Enter键，则会在整个表单上触发submit。我希望输入密钥结果 - 当电子邮件输入字段被聚焦时 - 与单击“添加”按钮具有相同的效果。我希望解决这个问题的正确方法是在邀请表单中嵌套一个电子邮件条目表格，如下所示：

    <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：

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

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

我的问题是嵌套表单（并且这样做会从<form>转换为<ng-form>，提交任何一个不再有效。

Plunker here

Answer 1

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

<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

Answer 2

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

我们可以通过在绑定到表单的$validate上触发“scope”事件来触发验证。

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

如果我想检查表单值是否正确，我会调用范围＆amp;的isFormValid。表格实例。

工作代码：Plunker link

在isFormValid （包含在上面的Plunker中）中添加一些额外的逻辑也很有用，它使形式＆amp;表单字段$dirty，因为我们将根据$dirty状态显示/隐藏验证消息。

Answer 3

提交表单后，您可以使用下面的内容找到所有嵌套表单

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

此处，表单是提交的外部表单控制器。您可以在ur onsubmit上挂钩此代码，并找到所有嵌套的表单并执行您必须执行的操作。

注意：这是coffeescript

AngularJS - 如何以嵌套形式触发提交

3 个答案: