AngularJSのフォームをサーバに送信できません

Question

私はAngularJSを学んでいます。私は既存のモデルを修正するためのベータプロジェクトを持っています。私はAPIを介して以下のフォームを投稿することはできません。送信ボタンをクリックすると、ダースボードは無意味です。何人かは私の手引きを教えてくれるでしょう。これは角度バージョンです：1.6.0。私は..フォーム要素でstartApprovalとしてNGが提出合格した。しかし、それはワークアウト

index.htmlを

<form ng-controller="RequestController" method="post" ng-submit="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 --> 
    <div class="col-lg-4"> 
     <!-- value part--> 
     <div class="panel panel-info"> 
     <!-- Heading --> 
     <div class="panel-heading"> 
      <h4>Value</h4> 
     </div> 
     <!-- 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> 

      <br> 

     </div> 
     </div> 

     <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"> 
      <label class="item item-input"> 
       <input type="text" placeholder="First approver name" name="approver1_name" ng-model="request.approvalObject.approver1_name"> 
      </label> 
      </div> 
      <!-- show second approver if process type != 1 --> 
      <div ng-show="secondApprover" class="groups list list-insert"> 
      <label class="item item-input"> 
       <input type="text" placeholder="Second approver name" name="approver2_name" ng-model="request.approvalObject.approver2_name" > 
      </label> 
      </div> 
     </div> 
     </div> 



    </div> 
</div> 
<input type="submit" value="request"> 

</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"); 
    } 


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

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

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

ありません

Answer 1

入力パラメータオブジェクトを要求するコントローラのstartApproval（approvalObject）メソッド。しかし、あなたはあなたのhtmlでNG-提出上の機能に

を任意のオブジェクトを渡すアウトと呼んでいるあなたは、コントローラに入力パラメータをクリアすることができますし、「

ようthis'keywordと目的球にTHOS変数にアクセスすることができますthis.approvalObject.generic_process_id = 1;