Post a form to backend in angularJS


#1

Previously I have mentioned like

<form ng-model="" ng-submit="request.startApproval()">
<input type="submit">

to submit my form. But it didn’t help to submit the form to backend. Then i have changed it like this…

<form ng-model= "">
<input ng-click="request.startApproval()" type="submit"> 

This helped me to activate the post method and submit the form. But then I realised that the body data in the form is not submitting to backend which I can see in Network->preview in console.

Here is my Markup

HTML

<form ng-controller="RequestController"  ng-submit="request.startApproval">

<div class="container">

  <div class="row" ng-submit>
    <p class="text-info">Please create request...</p>
    <!-- Left -->
    <div class="col-lg-2">

      <div class="panel panel-primary">
        <!-- Heading -->
        <div class="panel-heading">
          <h4>Request</h4>
        </div>
        <!-- Body -->
        <div class="panel-body">
          <!-- process type -->
          <div class="groups list list-inset">
            <div class="form-group">
              <label for="generic_process_id">Select process typ:</label>
              <select class="form-control"  id="generic_process_id" ng-model="request.approvalObject.generic_process_id"  >

              <option value="1" ng-show="true" >Simple Process</option>
                <!--   <option ng-hide= "true" ng-disabled="true" value="2">2</option>
                <option ng-hide= "true" ng-disabled= "true" value="3">3</option>
                <option ng-hide= "true" ng-disabled= "true" value="4">4</option>-->
              </select>
            </div>
          </div>

        </div>

      </div>
      <div class="panel panel-warning">
        <!-- Heading -->
        <div class="panel-heading">
          <h4>Priority</h4>
        </div>
        <!-- Body -->
        <div class="panel-body">
          <!-- priority type -->
          <div class="groups list list-inset">
            <label>Select priority:</label><br>
            <div class="btn-group" ng-init="request.approvalObject.priority='1'">
              <label class="btn btn-info" ng-model="request.approvalObject.priority" uib-btn-radio="'1'" uncheckable>Low</label>
              <label class="btn btn-info" ng-model="request.approvalObject.priority" uib-btn-radio="'2'" uncheckable>High</label>
            </div>
          </div>
          <hr>
        </div>
      </div>

    </div>
    <!-- Center -->
    <div class="col-lg-6">
      <!-- Description part-->
      <div class="panel panel-success">
        <!-- Heading -->
        <div class="panel-heading">
          <h4>Description</h4>
        </div>
       
        
        <pre>{{request.approvalObject|json}}</pre>
        <pre>{{request.form|json}}</pre>
      </div>
    </div>
    <!-- Right -->
    
        <!-- Body -->
        <div class="panel-body">
          <div class="groups list list-inset">
            <label class="item item-input">
              <input type="text" placeholder="" name="value" ng-model="request.approvalObject.value"><b class="text-primary">{{request.approvalObject.value_currency}}</b>
            </label>
          </div>
          <div class="groups list list-inset">

      <div class="panel panel-info">
        <!-- Heading -->
        <div class="panel-heading">
          <h4>Approver</h4>
        </div>
        <!-- Body -->
        <div class="panel-body">
          <div class="groups list list-insert">
          
        </div>
      </div>

      <div class="panel panel-info">
        <!-- Heading -->
        <div class="panel-heading">
          <h4>Date</h4>
        </div>
        <!-- Body -->
        <div class="panel-body">
          <!-- expiration date part -->
          <label>Select expiration date:</label>
          <pre>Selected Local time : <em>{{request.approvalObject.date_of_expiration | date: 'MM-dd-yyyy hh:mm' }}</em></pre>
          <pre>Selected UTC time   : <em>{{request.approvalObject.date_of_expiration|  date: 'MM-dd-yyyy hh:mm' : 'UTC' }}</em></pre>
          <div uib-datepicker ng-model="request.approvalObject.date_of_expiration" class="well well-sm" datepicker-options="options"></div>
          <div uib-timepicker ng-model="request.approvalObject.date_of_expiration" class="well well-sm" timepicker-options="options"></div>

        </div>
      </div>

  </div>
</div>
<input class="btn btn-info btn-lg col-xs-3" style="margin-left: 350px; margin-bottom: 50px" style="margin-bottom: 300px;" ng-click="request.startApproval()" type="submit" value="request">

<!--<button class="btn btn-primary center-block col-xs-3" ng-click="" style='margin: 450px;margin-top:10px; margin-bottom:100px'>Submit Request</button>-->
</form>

Controller.js

'use strict';

export default class RequestController {


  approvalObject = {

  };


  form = {};

  secondApprover = false;
  

$onInit() {
  this.approvalObject.generic_process_id=1;
  this.approvalObject.value_currency="EUR";
  this.approvalObject.priority=1;


  this.form.type=1;
}

  /*@ngInject*/
  constructor($http, $scope, socket) {
    this.$http = $http;
    console.log("testentry");
  }

//  loadApprover(approvers){
//    $http.get('/api/approvals', approver1_name)
//    .success(function(data){
//      $scope.approvers=data;
//    })
//  }

  startApproval(approvalObject) {
    console.log(this.approvalObject);
    // creator_email and name from backend
    this.generic_process_id=1;
    this.approvalObject.value_currency="EUR";
    this.approvalObject.priority=1;
    this.approvalObject.creator_email= "test1@example.com";
    this.approvalObject.creator_name= "test1";
    this.approvalObject.approver1_email= this.approvalObject.approver1_name+"@example.com";
    this.approvalObject.approver2_email= this.approvalObject.approver2_name+"@example.com";

    // wip from backend
    this.approvalObject.approval_process_status= "wip";
    this.approvalObject.priority= "super high";
    //date_of_creation: '',  -->> filled by database
    this.approvalObject.date_of_expiration = undefined;
    this.approvalObject.sending_tool= "Web-App";
    this.approvalObject.submitRequest=true;

    this.$http.post('/api/approvals', approvalObject);

}
}

Once i post this form, I have to see a JSON structure in Network > Preview/Response like this.

{
  "generic_process_id": "1",
  "value_currency": "EUR",
  "priority": "super high",
  "short_text": "fgfdgg",
  "long_text": "dfgdfgds",
  "value": "100",
  "approver1_name": "ahmet_dogan",
  "creator_email": "test1@example.com",
  "creator_name": "test1",
  "approver1_email": "ahmet_dogan@example.com",
  "approver2_email": "undefined@example.com",
  "approval_process_status": "wip",
  "sending_tool": "Web-App",
  "submitRequest": true
}

Can someone help me to figure out where have i done the mistake?