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

Question

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

这可以使用单个表单完成,但是如果用户在键入电子邮件时按下回车键,则会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>,提交任何一个不再有效.

这里的人物

Answer 1

您可以使用以下两种方法之一来指定在提交表单时应调用的javascript方法:
*表单元素
上的ngsubmit指令*第一个按钮上的nggt指令或类型为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

Answer 2

我有类似的要求 - 向导驱动的多步骤形式.当用户单击"下一步"按钮时,我将验证当前的步骤表单.

我们可以通过$validate在scope绑定到表单上触发' '事件来触发验证.

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

如果我想检查表单值是否正确,我将调用isFormValid范围和表单实例.

工作代码:Plunker链接

在isFormValid (包括在上面的Plunker中)中包含很少的附加逻辑也是有用的,它形成表单和表单字段,$dirty因为我们将根据它们的$dirty状态显示/隐藏验证消息.