19

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

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>，提交任何一个都不再有效。

戳这里

4

3 回答 3

8

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

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

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

当我想检查表单值是否正确时，我会调用isFormValid范围和表单实例。

工作代码：Plunker 链接

isFormValid 在（包含在上面的 Plunker 中）包含一些额外的逻辑也很有用，这使得表单和表单字段$dirty就像我们将根据它们的$dirty状态显示/隐藏验证消息一样。

于 2013-06-13T08:51:17.717 回答
8

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

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

普朗克

于 2013-04-11T18:36:01.500 回答
0

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

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

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

注意：这是咖啡脚本

于 2016-09-16T15:48:07.040 回答