【问题标题】:angular: form not submitting data not showing in firebug角度:表单未提交数据未显示在萤火虫中
【发布时间】:2017-06-12 07:44:18
【问题描述】:

我有一个表格,其中有一些文本框。文本框在运行时生成。喜欢的用户可以添加或删除文本框。

这是表格。

<form name="formprofile3" method="post" id="formprofile3" role="form" ng-submit="formprofile3()">
    <div class="container">
            <div class="row">

                <div ng-app="angularjs-starter" ng-controller="MainCtrl">

                   <fieldset  data-ng-repeat="choice in choices">
                    <div class="col-xs-12">
                        <div class="row">
                            <div class="col-xs-10">
                      <textarea name="exp_details" ng-model="choice.name" class="form-control textbox1" id="exp_details" placeholder="Experience" required="required" rows="3"></textarea></div>
                      <div class="col-xs-2">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</div>       
</fieldset>
<button class="addfields" ng-click="addNewChoice()">+</button>

                   <div id="choicesDisplay">
                      {{ choices }}
                   </div>
                </div>

            </div>

        </div>
<center><button type="submit" class="btn btn-home" name="btn-save1" id="btn-save1" required="required">Save & Finish <i class="icon ion-arrow-right-a"></i></button></center>
</form>

这里是提交表单的 Angular 代码。

formApp.controller('formProfile3', function($scope,$http){

      $scope.formData = {};

        $scope.formprofile3 = function() {


          var allData={'formData': $scope.formData, 'uid': uid}
        $http({
              method  : 'POST',
              url     :  'add_profile.php',
              data : allData,
              headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  
          })
              .success(function(data) {
                   if (!data.success) {

                      $scope.message = data.errors.message;

                  }else{
                      alert('Your details has been updated.');
                             }

              });

      };

    })

问题是当我提交表单时。它没有提交。没有数据正在发布。

任何建议我做错了什么。

编辑:我可以在 {{ Choices }} 中看到数据。

选择没有出现在表单数据中。

这是firebug中的数据。

{"formData":{},"uid":"75"}:""

【问题讨论】:

  • 它们在表单内ng-controller="MainCtrl"创建的内部范围内
  • 有没有我可以在提交表单时使用它。
  • 为什么在此处添加ng-controller="MainCtrl"&lt;div ng-app="angularjs-starter" ng-controller="MainCtrl"&gt;?正如@PankajParkar 在他的回答中所写,这就是问题所在,但问题中没有足够的上下文来回答这个问题。

标签: angularjs


【解决方案1】:

ng-appng-controller 指令移动到 body/html 标记,以便 formng-submit 指令可以编译

<body ng-app="angularjs-starter" ng-controller="MainCtrl">
    <form name="formprofile3" method="post" id="formprofile3" role="form" ng-submit="formprofile3()">
        ....
    </form>
</body>

我在页面上也看不到任何formData(as ng-model) 双向绑定。我想你应该寻找choices。此外,将name 属性添加到每个textarea 字段到表单对象的一部分以进行验证。

【讨论】:

  • 如何将名称属性添加到 textarea。如果是的话,那是角度吗?我正在学习角度。
  • @CalculatingMachine checkout this answer,您将清楚表单的工作原理
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-09-15
  • 2021-06-04
  • 1970-01-01
  • 2011-05-04
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多