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和嵌套形式：命名和聲明模型

回答

相關問題