.NET Core+AngularJS首页首次加载表单提交失败问题排查

• 表单核心属性缺失：首页的<form>标签未设置name属性和ng-submit绑定，AngularJS无法识别表单实例，也无法触发提交函数。
• 初始化时机不匹配：首页作为初始加载页面，DOM可能未完全渲染完成时控制器已执行，导致表单绑定未正确生效；而导航到其他页面再返回时，AngularJS的视图编译流程会重新触发，修复了绑定问题。

1. 补全表单标签关键属性 #

修改首页的<form>标签，添加name和ng-submit属性，确保AngularJS能正确关联表单验证与提交逻辑：

<form name="requestForm" ng-submit="submitForm(requestForm.$valid)" ng-controller="ConsultationController">
    <!-- 原表单内容保持不变 -->
</form>

2. 优化控制器初始化逻辑 #

将控制器初始化包裹在DOM就绪事件中，确保DOM完全渲染后再完成AngularJS绑定：

angular.element(document).ready(function() {
    var app = angular.module('myApp', []);
    app.controller('ConsultationController', ['$scope', '$http', function ($scope, $http) {
        $scope.formData = {};

        $scope.submitForm = function (isValid) {
            if (isValid) {
                var data = {
                    id: 0,
                    name: $scope.formData.name,
                    email: $scope.formData.email,
                    phone: $scope.formData.phone,
                    visa: $scope.formData.visa,
                    country: $scope.formData.country
                };

                console.log("Data:", data);

                $http({
                    url: `https://localhost:1653/api/Home/ContactUs`,
                    method: "POST",
                    data: data,
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    }
                }).then(function (response) {
                    swal({
                        title: "Success",
                        text: response.data.Message,
                        icon: "success",
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        allowEnterKey: false,
                        showConfirmButton: false,
                        buttons: false,
                        timer: 3000
                    });

                    $scope.formData = {};
                    $scope.requestForm.$setPristine();
                    $scope.requestForm.$setUntouched();
                }, function (error) {
                    alert('An error occurred: ' + (error.data ? error.data.message : 'Unknown error'));
                });
            }
        };
    }]);
});

注：移除了多余的transformRequest配置，AngularJS的$http默认会自动序列化JSON数据，无需手动处理。

3. 应急修复：手动触发Digest循环 #

如果上述方案无效，可在首页加载完成后手动触发AngularJS的Digest循环，确保所有绑定生效：

// 添加在首页脚本末尾
angular.element(document).ready(function() {
    var formElement = document.querySelector('[ng-controller="ConsultationController"]');
    if (formElement) {
        var scope = angular.element(formElement).scope();
        if (scope && !scope.$$phase) {
            scope.$apply();
        }
    }
});

1. 清空浏览器缓存，首次加载首页
2. 填写表单并点击提交，检查控制台是否输出Data:日志
3. 验证POST请求是否成功发送到API接口

内容的提问来源于stack exchange，提问作者Arslan khan