AngularJS表单不发送数据

Question

使用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"); });
    }
}

---

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

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

似乎my_form不再存在.实际上,如果我没有$scope.my_form = {}在控制器上初始化,表单甚至不会发送空对象.

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

Answer 1

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

因此,当您设置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"); 
            }
        );
    }
}