AngularJS и гнездовые формы: Правильный способ именования и объявления модели

Question

Ok, поэтому я создаю форму так:.

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

Так что создает ценность модели на основе имени и заявленные нг-модели. Если изменить их быть такими же, как и так:

<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] на входе, что делает я думаю, что я что-то путаю здесь ... Я не могу иметь этого во всех полях ввода.

Я хотел бы, чтобы имя и модель были одинаковыми. Это, казалось бы, прогрессивный способ улучшения и позволит нормальный без АЯКС пост, просто удалив метод нг-представить и Аякса путь будет выглядеть так:

$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

Именование формы помещает переменную в область с таким именем. Под ним он помещает свойства, названные в имена полей полей формы. Однако у вас уже есть модель в области с таким же именем, как и у формы: giftForm. Это вызывает путаницу: шаблон перезаписывает модель и/или наоборот.

Итак, дайте другое имя одному из них, например, назовите модель giftModel.

Answer 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> s. Например: <span ng-show="[formName].[fieldName].$error.[validationName]">invalid message</span>. Этот объект доступен в $ scope по адресу $scope.formName, но там обычно не является основанием для доступа к нему непосредственно в вашем контроллере.

Надеюсь, это поможет вам (или кому-то).