1

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

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

任何人都可以洞察我所缺少的东西，或者如果我的架构从头开始就有缺陷，我会很感激你的智慧......

4

2 回答 2

2

我希望名称和型号相同。

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

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

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

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

于 2014-01-09T17:32:33.963 回答
1

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

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

于 2014-01-09T17:22:21.920 回答