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

Posted 2023-05-09

【中文标题】AngularJS 等待提交表单（ng-submit）

【英文标题】：AngularJS wait submit the Form (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 方法。

【参考方案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;提交