AngularJS - 如何触发提交的嵌套形式(AngularJS - How to trigge

2019-08-21 14:08发布

我建立提交时产生的邀请的形式。 邀请有几个领域,其中之一是与“添加”按钮,点击时应该地址添加到应该收到邀请的电子邮件地址列表的电子邮件地址输入。

这可以用一个单一的形式来完成,但是如果用户点击回车键,打字时的电子邮件,然后它会触发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这里

Answer 1:

我有类似的规定 - 向导驱动的多步骤的形式。 当用户点击“下一步”按钮,我已经验证当前步骤的形式。

我们可以通过发射“触发验证$validate的”事件scope必然形式。

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

当过我要检查,如果表单值是正确的,我会打电话给isFormValid与范围及构成情况。

工作代码: Plunker链接

另外,也有在一些额外的逻辑有用isFormValid (包括在上述Plunker),这使得形式&表单字段$dirty ,因为我们将显示/隐藏基于它们的验证消息$dirty状态。



Answer 2:

您可以使用,以指定当表单提交JavaScript方法应该被称为以下两种方法之一:
*表单元素上ngSubmit指令
*关于类型的第一按钮或输入字段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>

Plunker



Answer 3:

当提交表单时,您可以使用象下面这样的一些东西找到所有嵌套形式

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

这里, 形式是将其提交的外形控制器。 您可以在乌拉圭回合的onsubmit钩这段代码,并找到所有的嵌套形式,做任何你不得不这样做。

注:这是CoffeeScript的



文章来源: AngularJS - How to trigger submit in a nested form