AngularJS 和嵌套表单：命名和声明模型的正确方法

Question

好的，所以我正在创建一个这样的表单：

<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.$invalid 仅突出显示在输入有文本后启用按钮。然而，使用batarang，我注意到范围看起来像这样：

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

所以它是根据名称和声明的 ng-model 创建模型值。如果我将它们更改为像这样：

<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 object]，这让我觉得我在这里混淆了一些东西.....我不能在所有输入字段中都有那个。

我希望名称和型号相同。这似乎是渐进式增强方式，只需删除 ng-submit 方法即可允许正常的非 ajax 发布，而 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
                });

任何人都知道我缺少什么，或者如果我的架构从头开始就有缺陷，我会很感激你的智慧......

Answer 1

我希望名称和型号相同。

你可以这样做，但你必须有一个单独的范围，因此你的表单有一个单独的控制器。

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

您对$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: 'test@monkey.com'
   };    

   $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 $scope.formName 上可用，但通常没有理由直接在控制器中访问它。

我希望这对您（或某人）有所帮助。

Answer 2

为表单命名会将变量置于具有该名称的范围内。在它下面，它放置以表单字段名称命名的属性。但是，您已经在范围内有一个模型与表单同名：giftForm。这会导致混淆：模板会覆盖模型和/或反之亦然。

所以，给其中一个命名，例如将模型命名为giftModel。