AngularJS 等待提交表单（ng-submit）答案

【问题标题】：AngularJS wait submit the Form (ng-submit)AngularJS 等待提交表单（ng-submit）
【发布时间】：2017-12-24 18:05:07
【问题描述】：

我有一个表单，我在此表单加载时提交此表单。

我希望在加载此页面时等待几秒钟，然后提交此表单。我不想使用任何按钮提交此表单，它应该是自动提交表单。有可能吗？

我的html页面代码如下

<form name="main" ng-submit="submitForm(main_1)">
    <table align="center">
        <tr>
            <td>First Name :</td>
            <td>
                <input type="text" id="txtFirstname" name="txtFirstname" ng-model="verifyData.firstName" /></td>
            <td>Middle Initial :</td>
            <td>
                <input type="text" id="txtMiddlename" name="txtMiddlename" ng-model="verifyData.middleInitial" /></td>
        </tr>
    </table>
    <img src="images/loader.gif" id="loading-image" ng-if="showLoader">
    <div id="load1" ng-if="showLoader"></div>
</form>

我的控制器代码如下

angular.module(appConfig.appName)
    .controller('appController', ['$rootScope', '$scope', '$state', '$window', 'globalService', 'dataServices', function ($rootScope, $scope, $state, $window, globalService, dataServices) {
        $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
            window.history.forward();
        });

        $scope.showLoader = false;
        var firstName = document.getElementById('txtFirstname');
        if (firstName != null) {
            var lastName = document.getElementById('txtLastname');
        }

        $scope.submitForm = function () {
            $scope.showLoader = true;
            dataServices.verifyData($scope.verifyData).then(function (response) {
                $state.go(response.redirectURL);
            }, function (res) {
                $rootScope.serviceErrorMsg = res.error;
                $state.go(res.redirectURL);
            });
        }

        if ($scope.verifyData) {
            $scope.submitForm();
        }
    }])
]);

我正在使用 AngularJS。

【问题讨论】：

使用 $timeout 方法，给出指定的等待时间间隔并调用 submitform 方法。

标签： javascript jquery angularjs forms

【解决方案1】：

你可以试试 Angular 的超时服务

$timeout(function () {
        $scope.submitForm();
    }, 2000);

【讨论】：

【解决方案2】：

使用 $timeout 方法在特定时间间隔后调用自动提交

$timeout( function(){
        // call submitform method
    }, 5000 );

【讨论】：

在控制器内部我必须在哪里使用它？
但是提交表单后就到了controller，对吗？
在你的控制器中保持超时调用。因此，即使在提交和调用控制器之后也没有任何变化。

【解决方案3】：

在控制器初始化 2 秒后使用 $timeout 提交表单： $timeout($scope.submitForm, 2000)

【讨论】：

你能解释一下我必须在哪里写这段代码吗，在控制器内部？
是的，你是对的。把它放在你的控制器里。并且不要忘记将$timeout 注入到您的控制器中。

【解决方案4】：

也许你可以使用 $timeout 或者如果你想在提交结束时做其他事情，你可以使用 else Promises。

$timeout( function(){ // code }, 3000 );

或

Some_Function().then(function(){ //YourCode });

【讨论】：

【解决方案5】：

Write the code in $timeout (Note :- Just Insert $timeout as a dependency otherwise it will give error)

像这样 .controller('appController', ['$rootScope', '$scope', '$state', '$window', 'globalService', 'dataServices', '$timeout', function ($rootScope, $scope, $ state, $window, globalService, dataServices, $timeout)

For example :- 
$scope.submitForm = function () {
            $scope.showLoader = true;
            dataServices.verifyData($scope.verifyData).then(function (response) {
                $state.go(response.redirectURL);
            }, function (res) {
                $rootScope.serviceErrorMsg = res.error;
                $state.go(res.redirectURL);
            });
        }
$timeout(function(){
 $scope.submitForm();
}, 5000);

【讨论】：

【解决方案6】：

一个简单的使用方法是执行此操作

在您的视图 (HTML) 中 - 禁用提交按钮
<button ng-readonly="button_readonly" ng-disabled="button_disabled" name="Submit">SUBMIT</button>

在控制器中，这些值最初设置为 false
$scope.button_readonly = false;
$scope.button_disabled = false;

因为角度数据绑定。然后你就可以做你的逻辑了。
如果逻辑成功返回（无论是ajax，还是输入验证等，那么你可以设置以上为真

成功：
设置为真
$scope.button_readonly = true;
$scope.button_disabled = true;

此时：您的按钮现在可以点击了。因此，它已准备好被推送（提交）到 php

在 php 中
if(isset($_POST['Submit'])){
//do your thing
}

回答你的问题。由于您不想使用按钮将隐藏属性添加到按钮。然后定期检查是否价值观发生了变化。当他们这样做时，添加提交逻辑。 IE。如果 button_readonly = true;提交

【讨论】：