Question

我需要一个帮助。当用户使用Angular.js按回车键时，我需要提交表单。我在下面解释我的代码。

    <form name="billdata" id="billdata" enctype="multipart/form-data" novalidate>
    <div id="SHOWDATA">
        <div id="transactionsPortlet" class="panel-collapse collapse in">
            <div class="portlet-body">
                <div class="totalaligndiv">
                    <div class="col-md-6">
                        <div class="input-group bmargindiv1 col-md-12">
                            <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Subject Type:</span>
                            <input type="text" name="shortname" id="resourcesub" class="form-control" placeholder="Add Your Subject Type " ng-model="subject" ng-keypress="clearField('resourcesub');">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="input-group bmargindiv1 col-md-12">
                            <span class="input-group-addon ndrftextwidth text-right" style="width:180px">No of Classes:</span>
                            <select class="form-control" id="resourceperiod" ng-model="period" ng-change="removeBorder('resourceperiod',subject);">
                                <option value="">Select Class</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div style="text-align:center; padding-top:10px;">
                        <input type="button" class="btn btn-success" ng-click="addClassData();" id="addProfileData" ng-value="buttonName" />
                        <input type="button" class="btn btn-red" ng-click="cancelClassData();" id="cancelProfileData" ng-value="cancelbuttonName" ng-show="showCancel" />

                    </div>

                    <div class="clearfix"></div>

                </div>
            </div>
        </div>
    </div>
</form>

在这里我需要如果用户按下回车键而没有提供任何数据，验证将显示。如果用户通过提供表格将提交的所有数据按回车键。现在我可以通过点击按钮进行操作但在这里我需要两个。请帮助我。

Answer 1

您可以将ng-submit设置为：

<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate ng-submit="addClassData();">

或者如果你想保持按钮而不是提交按钮而不是下面的指令可以帮助你。

angular.module('NgEnter', [])
    .directive('ngEnter', function() {
        return function(scope, element, attrs) {
            element.bind("keypress", function(e) {
                if(e.which === 13) {
                    scope.$apply(function(){
                        scope.$eval(attrs.ngEnter, {'e': e});
                    });
                    e.preventDefault();
                }
            });
        };
    });

并将此指令调用到

<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate ng-enter="addClassData();">

使用angular.js使用Enter键提交表单

1 个答案: