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上设置。< / p>

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

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

AngularJS表单不发送数据

1 个答案: