AngularJS 表单提交

Question

在开发我的第一个小型 AngularJS 应用程序时，我遇到了表单提交问题。我参加了 CodeSchool 课程，自己想出了最多的办法，但是这个表格提交的东西很麻烦……好吧，我只是不知道我哪里错了，所以如果你能告诉我正确的解决方案，那会很好，所以我可以继续。

项目：一个简单的锻炼列表，您可以在其中列出您进行的所有训练课程。这是我的HTML，元素3是问题：

   <header class="wob-masthead container-fluid">
        <div class="row">
                <div class="col-md-6" ng-init="tab = 1">
                        <ul class="nav nav-pills">
                                <li ng-class="{ active:tab === 1 }"><a href ng-click="tab = 1">Overview</a></li>
                                <li ng-class="{ active:tab === 2}"><a href ng-click="tab = 2">Stats</a></li>
                                <li ng-class="{ active:tab === 3 }"><a href ng-click="tab = 3">New</a></li>
                        </ul>
                </div>
                <div class="col-md-6">
                        <form class="navbar-form pull-right" role="search">
                                <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Search">
                                </div>
                                <button type="submit" class="btn btn-default">Search</button>
                        </form>
                </div>
        </div>
    </header>
    <section class="wob-main mainlist container" id="headjump">



     <!--- ==========================================
    Element 1: Overview
    ============================================= -->



    <div class="subsite" ng-show="tab === 1">
        <div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div>
        <h1>WorkoutBuddy</h1>
    <div class="table-responsive" ng-controller="ListController as listing">           
    <table class="table table-hover">
    <thead>
        <tr>
                <th  class="col-md-2">Date</th>
                <th  class="col-md-8">Type</th>
                <th  class="col-md-1">Repeat</th>
                <th  class="col-md-1">Time</th>
        </tr>
    </thead>
    <tbody ng-controller="ListController as listing">
        <tr ng-repeat="wo in listing.sessions">
                <td>{{wo.date | date:'dd/MM/yyyy'}} </td>
                <td>{{wo.name}}</td>
                <td>{{wo.repeat}}</td>
                <td>{{wo.time}} Minutes</td>
        </tr>
    </tbody>
    </table>
        </div>
    </div>


    <!--- ==========================================
    Element 2: Stats
    ============================================= -->




    <div class="subsite" ng-show="tab === 2">
        <div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div>
        <h1>Stats</h1>          
    <!-- Ende Subsite -->
    </div>



    <!--- ==========================================
    Element 3: New
    ============================================= -->


    <div class="subsite" ng-show="tab === 3">
        <div class="headico"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></div>
        <h1>New</h1>

    <div class="table-responsive" ng-controller="ListController as listing">           
    <table class="table table-hover">
    <thead>
        <tr>
                <th  class="col-md-2">Date</th>
                <th  class="col-md-8">Type</th>
                <th  class="col-md-1">Repeat</th>
                <th  class="col-md-1">Time</th>
        </tr>
    </thead>
    <tbody ng-controller="ListController as listing">
        <tr ng-repeat="wo in listing.sessions | limitTo:2">
                <td>{{wo.date | date:'dd/MM/yyyy'}} </td>
                <td>{{wo.name}}</td>
                <td>{{wo.repeat}}</td>
                <td>{{wo.time}} minutes</td>
        </tr>
    </tbody>
    </table>
        </div>

    <form name="WorkoutForm" ng-controller="EntryController as entryCtrl">

    <blockquote>
        <h3>Last Workout:</h3>
        <strong>{{entryCtrl.wo.name}}</strong><br>
        <small>am: {{entryCtrl.wo.date}}</small><br>
        {{entryCtrl.wo.repeat}} repeats in {{wo.time}} minutes.
    </blockquote>


        <input ng-model="entryCtrl.wo.date" type="date" placeholder="date" />
        <input ng-model="entryCtrl.wo.name" type="name" placeholder="name"  />
        <input ng-model="entryCtrl.wo.repeat" type="repeat" placeholder="repeat"  />
        <input ng-model="entryCtrl.wo.time" type="time" placeholder="time"  />
        <input type="submit" value="Add" />
    </form>
    <!-- Ende Subsite -->
    </div>
    </section>

我用 Bootstrap 设计了样式，这是我的 app.js：

    (function(){    
    var app = angular.module('wobuddy', [ ]);

    app.controller('ListController', function(){
        this.sessions = wos;       
    });

    var wos = [
    {
        name: 'Squat',
        date: '01.01.2015',
        repeat: 50,
        time: 10
    },
    {
        name: 'Push Ups',
        date: '01.01.2015',
        repeat: 50,
        time: 10
    }
    ];

    })();

使用导航在各部分之间切换非常好，并且还打印出 table 中的数据元素，但是当我推送提交时没有任何反应 - 真的希望你能帮助我学习:-)

Answer 1

通过查看您的表单 HTML，我认为您错过了表单中的 name 属性，并且还缺少 ng-submit 指令，该指令将在提交表单后调用。使用 $valid() 方法检查控制器内部的表单验证并执行 post 否则向用户发出警报。

HTML

<form name="workoutForm" ng-controller="ReviewController as reviewCtrl" ng-submit="submit(workoutForm, entryCtrl.wo)">

    <blockquote>
        <h3>Last Workout:</h3>
        <strong>{{entryCtrl.wo.name}}</strong>
        <br>
        <small>am: {{entryCtrl.wo.date}}</small>
        <br> {{entryCtrl.wo.repeat}} repeats in {{wo.time}} minutes.
    </blockquote>


    <input name="date" ng-model="entryCtrl.wo.date" type="date" placeholder="date" />
    <input name="name" ng-model="entryCtrl.wo.name" type="name" placeholder="name" />
    <input name="repeat" ng-model="entryCtrl.wo.repeat" type="repeat" placeholder="repeat" />
    <input name="time" ng-model="entryCtrl.wo.time" type="time" placeholder="time" />
    <input type="submit" value="Add" />
</form>

控制器

$scope.submit = function(workoutForm, item){
   if(workoutForm.$valid)
     //then make $http.post by sending item values
   else
     //show error
};

Answer 2

您需要创建一个 EntryController 来将新对象添加到 wos 集合的末尾。像这样：

app.controller('EntryController', function($scope) {
  $scope.wo = {};
  $scope.submit = function() {
    wos.push($scope.wo);
    $scope.wo = {};  // Clear the form fields
  };
});

那么你的那个部分的 HTML 可能看起来像这样：

<form name="WorkoutForm" ng-controller="EntryController">
    <blockquote>
        <h3>Last Workout:</h3>
        <strong>{{wo.name}}</strong><br>
        <small>am: {{wo.date}}</small><br>
        {{wo.repeat}} repeats in {{wo.time}} minutes.
    </blockquote>

    <input ng-model="wo.date" type="date" placeholder="date" />
    <input ng-model="wo.name" type="name" placeholder="name"  />
    <input ng-model="wo.repeat" type="repeat" placeholder="repeat"  />
    <input ng-model="wo.time" type="time" placeholder="time"  />
    <button ng-click="submit()">Add</button>
</form>

请注意，控制器通过 $scope 对象而不是通过控制器对象本身将数据传送到模板更为常见。

Answer 3

更新

<html ng-app='demoApp'>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>


<form ng-controller="validationCtrl">
    <input type="text" placeholder="Name...." ng-model="user.name"/>
    <input type="text" placeholder="Password...." ng-model="user.pass"/>
    <input type="text" placeholder="Mobile...." ng-model="user.mo"/>
    <input type="submit" ng-click="alldata(user)"/>
</form>
<script>
//This is controller
var app = angular.module('demoApp', []);
app.controller('validationCtrl', function($scope) {

   $scope.alldata=function(user)
   {
    alert(JSON.stringify(user));
   }
});
</script>

</body>
</html>

Answer 4

You can also use this method, and Your form shoud be like

<form method="post" name="sentMessage" id="my_contact" novalidate="novalidate">
      <div class="control-group">
        <div class="form-group floating-label-form-group controls mb-0 pb-2">
          <label>Name</label>
          <input class="form-control" id="name" type="text" name="name" placeholder="Name" required="required" data-validation-required-message="Please enter your name.">
          <p class="help-block text-danger"></p>
        </div>
      </div>
      <div class="control-group">
        <div class="form-group floating-label-form-group controls mb-0 pb-2">
          <label>Email Address</label>
          <input class="form-control" id="email" type="email" name="email" placeholder="Email Address" required="required" data-validation-required-message="Please enter your email address.">
          <p class="help-block text-danger"></p>
        </div>
      </div>
      <div class="control-group">
        <div class="form-group floating-label-form-group controls mb-0 pb-2">
          <label>Phone Number</label>
          <input class="form-control" id="phone" type="tel" name="phone" placeholder="Phone Number" required="required" data-validation-required-message="Please enter your phone number.">
          <p class="help-block text-danger"></p>
        </div>
      </div>
      <div class="control-group">
        <div class="form-group floating-label-form-group controls mb-0 pb-2">
          <label>Message</label>
          <textarea class="form-control" id="message" rows="5" name="Message" placeholder="Message" required="required" data-validation-required-message="Please enter a message."></textarea>
          <p class="help-block text-danger"></p>
        </div>
      </div>
      <br>
      <div id="success"></div>
      <div class="form-group">
        <a href="javascript:void(0)" (click)="send_query()" class="btn btn-primary btn-xl" id="sendMessageButton">Send</a>
      </div>
    </form

import jquery as below npm install jquery using CLI

import * as $ from 'jquery';

send_query() function will be

send_query() {
var data = $("#my_contact").serializeArray();
var indxarr = {};
$.each(data,function(i,v){
  indxarr[v['name']] = v['value'];
});
data = JSON.parse(JSON.stringify(indxarr))

//POST YOUR DATA
this.httpClient.post('http://localhost/rajat/ajax/contact_query_submit/', data,httpOptions)
.subscribe(data => {
  console.log(data);
});

}

Your backend code will be

public function contact_query_submit(){

    if ($this->input->post()) {

        $postdata = file_get_contents("php://input");
        $_POST = json_decode($postdata,TRUE);
        $addArr = array(
            'name' => $this->input->post('name'),
            'email' => $this->input->post('email'),
            'phone' => $this->input->post('phone'),
            'message' => $this->input->post('message'),
            'created' => time()
        );
        if($this->main_model->create('rjt_contact', $addArr)){
            $arr[] = array('type' => 'success', 'msg' => '<p>Your query has been received. <br>We will get back to you soon.</p>');
            echo json_encode($arr);
        }else{
           $arr[] = array('type' => 'warning', 'msg' => '<p>'.$this->db->last_query().'</p>');


            echo json_encode($arr);
        }
    }else{
        $arr[] = array('type' => 'warning', 'msg' => '<p>No data post yet</p>');
        echo json_encode($arr);
    }
}

AngularJS 表单提交

AngularJS Form submit

angularjs

forms

angularjs-directive

angularjs-ng-repeat

form-submit