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

在 Controller 中使用以下 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

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

我们可以通过触发' $validate 来触发验证。 ' scope 上的事件绑定(bind)到表格。

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

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

工作代码: Plunker link

在 isFormValid 中添加一些额外的逻辑也很有用。 (包含在上述 Plunker 中)它使表单和表单字段 $dirty因为我们将根据其 $dirty 显示/隐藏验证消息状态。