AngularJS和嵌套形式：命名和声明模型

确定的正确方法，所以我创建一个表单，像这样：AngularJS和嵌套形式：命名和声明模型

<form novalidate class="simple-form" action="" name="mainForm" ng-submit="doSubmit()" method="POST"> 
    <div ng-form name="giftForm" class="panel-body"> 
     <input type="text" 
        id="x_amount" 
        name="x_amount" 
        class="form-control input-lg" 
        ng-model="giftForm.amount" 
        ng-required="true"> 
    </div> 
    <div class="row"> 
     <button type="submit" class="btn" ng-disabled="mainForm.$invalid">Submit</button> 
    </div> 
</form>

这工作进行验证，即MainForm的$无效的唯一亮点使按钮后，输入有文字。然而，使用batarang，我注意到，范围看起来像这样：

{"giftForm":{"x_amount":{},"amount":"a"}}

所以它是基于名称和声明NG-模型创建模型值。如果我改变他们是一样的，像这样：

<input type="text" 
        id="x_amount" 
        name="x_amount" 
        class="form-control input-lg" 
        ng-model="giftForm.x_amount" 
        ng-required="true">

的提交说明的正确范围：

{"giftForm":{"x_amount":"a"}}

但输入字段最初显示与输入[Object对象]，这使得我觉得我在这里混淆了一些东西.....我不能在所有的输入字段中都有这个。

我希望名称和模型相同。这似乎是渐进增强的方式将允许一个正常的非Ajax后通过简单地移除NG提交方式和AJAX方式会是什么样子：

$http({ 
     method : 'POST', 
     url  : 'formAction.do', 
     data : $.param(angular.toJson($scope.mainForm)), 
     headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
      }) 
       .success(function(data) { 
        //success 
       }) 
       .error(function(data, status, headers, config) { 
        //error 
       });

任何人有见识到了什么我失踪或如果我的架构有缺陷，我将非常感激智慧....

来源

2014-01-09 jessehensold

命名窗体将名称放在范围内。在它下面，它放置以表单字段名称命名的属性。但是，您已在范围中使用与：giftForm表单名称相同的模型。这会造成混淆：模板覆盖模型和/或反之亦然。

因此，给其中的一个命名，例如命名模型giftModel。

来源

2014-01-09 17:22:21

好的，这改变了它，现在我看到了更多的东西，现在看着对象，giftForm从简单的模型变成了看起来像formController的东西。 – jessehensold

所以我误解了你是如何声明这些的，但现在又回到了寻找ajax提交的所有子表单数据的最佳方法的原始问题。在范围内创建的模型对象没有什么特别的地方吗？因为现在在mainForm对象上做一个angular.toJson将会返回的不仅仅是输入数据......我会提出一个新问题。 – jessehensold

实际上我认为''scope.giftForm'被'FormController'覆盖，然后当''更新了它的模型时，'FormController'接收到另一个值。这是一个混乱，只是给他们不同的名字或会有麻烦。 –

我想要的名称和模型是相同的。

您可以做到这一点，但你必须有一个单独的范围，为此您形式的单独的控制器。

更重要的是，这不会给你买东西。输入名称属性主要用于验证显示，而不是其他的。

您使用$http关注我更多。看起来你正在用JQuery的思维方式思考。我会挑战你把JQuery从窗口扔出去一段时间，直到你习惯了Angular。

这里就是人们通常做的形式（从模型结构，命名和验证）：

查看：

<form name="myForm" ng-submit="sendFoo()"> 
    <div> 
     <label for="name">name</label> 
     <input type="text" id="name" name="name" ng-model="foo.name" required/> 
     <span ng-show="myForm.name.$error.required">required</span> 
    </div> 
    <div> 
     <label for="email">email</label> 
     <input type="email" id="email" name="email" ng-model="foo.email" required/> 
     <span ng-show="myForm.email.$error.required">required</span> 
     <span ng-show="myForm.email.$error.email">invalid email</span> 
    </div> 
    <button type="submit" ng-disabled="myForm.$invalid">Submit</div> 
</form>

控制器：

app.controller('MyCtrl', function($scope, $http) { 
    $scope.foo = { 
     name: 'Someone Special', 
     email: '[email protected]' 
    };  

    $scope.sendFoo = function(){ 
     $http.post('/Some/Url/Here', $scope.foo) 
      .then(function(result) { 
      $scope.result = result.data; 
      }); 
    }); 
});

你请注意表单的名称和输入的名称仅用于验证这些<span>标记秒。像这样：<span ng-show="[formName].[fieldName].$error.[validationName]">invalid message</span>。该对象在$scope.formName的$ scope上可用，但通常是不是直接在控制器中访问它的原因。

我希望这可以帮助你（或某人）。

来源

2014-01-09 17:32:33

AngularJS和嵌套形式：命名和声明模型

回答

相关问题