1

Angular 表单遇到一个奇怪的问题（运行 1.2 rc.2）。如果我留下没有名称的表单并在每个模型前面加上一个通用名称，则表单可以正常发送。如果我从每个模型中删除前置名称并为表单提供该名称，则提交操作不会绑定数据并且表单会尝试发送空请求有效负载。

这个模型工作正常，除了 Angular 的表单验证没有实例化

<form ng-submit="sendForm()">
    <input type="text" ng-model="my_form.fullname">
    <button type="submit">Submit</button>
<form>

.

app.controller("MyCtrl", function($scope, $http) {
    $scope.sendForm = function() {
        $http({ method:'POST', url: '...', data: $scope.my_form; })
            .then(function(result) { alert("The form was sent"); },
                function(reason) { alert("There was a problem"); });
    }
}

所以现在如果我在表单中添加一个名称属性并将其从模型中删除，表单会尝试发送空数据......

<form name="my_form" ng-submit="sendForm()">
    <input type="text" ng-model="fullname">
    <button type="submit">Submit</button>
<form>

似乎 my_form 不再存在。事实上，如果我不在$scope.my_form = {}控制器上进行初始化，表单甚至不会发送一个空对象。

关于如何使第二种方法起作用的任何建议？

4

1 回答 1

5

当您为表单命名时，该名称将成为一个变量，其中包含有关字段的元数据......脏标志，错误等。它实际上并不保存数据。

因此，当您设置ng-model为时fullname，该值并未设置在my_form对象上，而是直接设置在您的$scope.

就个人而言，我更喜欢这样做：

<form name="my_form" ng-submit="sendForm(formData)">
    <input type="text" ng-model="formData.fullname">
    <button type="submit" ng-disabled="my_form.$invalid">Submit</button>
<form>

然后您的代码如下所示：

app.controller("MyCtrl", function($scope, $http) {
    $scope.sendForm = function(formData) {
        $http({ 
             method:'POST', 
             url: '...', 
             data: formData 
        })
        .then(
            function(result) { 
                alert("The form was sent"); 
            },
            function(reason) { 
                alert("There was a problem"); 
            }
        );
    }
}
于 2013-10-16T20:59:28.440 回答