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

前端之家收集整理的这篇文章主要介绍了形式 – AngularJS – 如何触发以嵌套形式提交前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在建立一个在提交时生成邀请的表单。邀请有几个字段,其中一个是一个带有“添加”按钮的电子邮件地址输入,当点击时,应将该地址添加到应收到邀请的电子邮件地址列表中。

这可以通过单个表单完成,但是如果用户在输入电子邮件时遇到回车键,则会在整个表单上触发提交。我想输入密钥结果 – 当电子邮件输入字段集中时 – 具有与点击“添加”按钮相同的效果。我预计解决这个问题的正确方法是将邀请表格中的电子邮件表单嵌套,如下所示:

<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&gt ;,从而将其转换为< ng-form>,提交任何一个不再有效。

Plunker here

我有类似的要求 – 向导驱动的多步骤形式。当用户单击“下一步”按钮时,我必须验证当前步骤窗体。

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

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

什么时候我想检查表单值是否正确,我将调用isFormValid的范围&表单实例。

工作代码Plunker link

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

猜你在找的Angularjs相关文章