Question

以前我提到过像

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

提交我的表格。但它没有帮助将表单提交给后端。然后我就这样改了..

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

这有助于我激活post方法并提交表单。但后来我意识到表单中的正文数据没有提交到后端，我可以在网络中看到＆gt;在控制台中预览。

这是我的标记

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);

}
}

我发布此表单后，我必须在网络中看到一个JSON结构＆gt;像这样的预览/响应。

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

有人可以帮我弄清楚我在哪里犯了错误吗？

Answer 1

我对ES6语法不是100％肯定，我相信这会有所帮助：

在按钮中，更改为：

<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(request)" type="submit">

其他想法

您的startApproval方法直接在您的控制器上，因此您只需拨打ng-click="startApproval(request)"而不是ng-click="request.startApproval(request)"。

在startApproval(approvalObject)函数中，我会删除所有this引用，因为approvalObject不是该函数的属性。

Answer 2

我添加了这个。我的approObject它解决了我的问题..

this。$ http.post（'/ api / approvals'，this.approvalObject）;

将表单提交到AngularJS

2 个答案:

其他想法