2016-05-09 7 views
1

私はREST APIにAngularjs経由で作成したデータを投稿しようとしていますが、データをフォームに入れて送信すると、フィールドがいっぱいになってもフィールドが必要であることをサーバーに知らせる(ノードと復元)コンソールエラーが表示されます。私のrestify APIに投稿するときに "path 'name_of_the_field'が必要です"

.factory('SaveStudentResource', function($resource){ 
return $resource('http://localhost:3000/createStudent', {}, { 
    post: {method:'POST', isArray:false, headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}} 
}) 

}):ここで

は私のサーバーコントローラここ

var Student = require('../models/studentSchema'); 

// Creating New Student 
this.createStudent = function (req, res, next) { 
    var student = new Student({ 
     name:req.body.name, 
     email:req.body.email, 
     age:req.body.age, 
     city:req.body.city, 
     pic:req.body.pic 
    }); 


    student.save(function(err, result){ 
     if (err) { 
      console.log('resultado: ' + result); 
      console.log(err); 
      return res.send({'errores':err}); 
     } 
     else { 
      return res.send({'result':result,'status':'successfully saved'}); 
     } 
    }); 

}; 

で私のポスト機能は、スキーマ

module.exports = (function studentschema(){ 

    var mongoose = require('../db').mongoose; 

var schema = { 
     name: {type: String, required: true}, 
     email: {type: String, required: true}, 
     age: {type: String, required: true}, 
     city: {type: String, required: true}, 
     pic: {type:String, required:true} 
    }; 
    var collectionName = 'student'; 
    var studentSchema = mongoose.Schema(schema); 
    var Student = mongoose.model(collectionName, studentSchema); 

    return Student; 

})(); 

リソースを使用してポストを作る私のangularjs工場であります

とフォームと相互作用し、JSONオブジェクトを保存しようとコントローラー:

.controller('NewStudent', function($scope, SaveStudentResource){ 
    $scope.salut = "Hallo!"; 
    $scope.student = {}; 
    console.log($scope.student); 
    $scope.saveStudent = function(){ 
     console.log($scope.student); 
     SaveStudentResource.save({ data: $scope.student }, function(data){ 
      console.log($scope.student); 
      console.log(data); 
      $scope.student = {}; 
     }) 
    } 
    console.log("Done!"); 
}) 

や情報を送信するフォームモデルへ

<form ng-submit="saveStudent()"> 
<div class="form-group"> 

    <input type="text" placeholder="Nombre" ng-model="student.name" class="form-control" required> 

</div> 
<div class="form-group"> 

    <input type="text" placeholder="Email" ng-model="student.email" class="form-control" required> 

</div> 
<div class="form-group"> 

    <input type="text" placeholder="Edad" ng-model="student.age" class="form-control" required> 

</div> 
<div class="form-group"> 

    <input type="text" placeholder="Ciudad" ng-model="student.city" class="form-control" required> 

</div> 
<div class="form-group"> 

    <input type="text" placeholder="Foto" ng-model="student.pic" class="form-control" required> 

</div> 
<div class="form-group"> 
    <button type="submit" class="btn btn-primary">Guardar</button> 
</div> 

私はこれを取得していますサーバーからの応答:

m {errores: Object, $promise: d, $resolved: true} 
$promise:d 
$resolved:true 
errores:Object 
    errors:Object 
    age:Object 
    kind:"required" 
    message:"Path `age` is required." 
    name:"ValidatorError" 
    path:"age"properties:Object 
    __proto__:Object 
city:Object 
email:Object 
name:Object 
pic:Object 
__proto__:Object 
message:"student validation failed" 
name:"ValidationError" 
__proto__:Object 
__proto__:Object 

私のコードに何か不足していますか?

+0

サーバーコードからreq.bodyの出力を印刷できますか? –

+0

Shure、私がconsole.logをreq.bodyにすると、投稿しようとしているフォームのデータを持つ配列が得られます。 – Omar

答えて

0

私はSarath Nairの提案に感謝しました。保存関数の直前にサーバー上でreq.bodyオブジェクトを印刷すると、フロントエンドから投稿したデータを持つオブジェクトを受け取っているのを見てきました。だから、

{ data: 
    { name: 'Johnny Greengood', 
    email: '[email protected]', 
    age: '45', 
    city: 'NY', 
    pic: 'http://static.stereogum.com/uploads/2015/06/Jonny-Greenwood.jpg' } } 

、私はreq.bodyから受信したオブジェクトの主な値は、「データ」だったと指摘しました。そして、代わりの学生オブジェクトにパラメータを渡す、私は「res.body.data」を渡され、それが次のように働いていた:

var Student = require('../models/studentSchema'); 

    // Creating New Student 

    this.createStudent = function (req, res, next) { 

    var student = new Student(req.body.data);//THIS IS THE DEAL! 


    student.save(function(err, result){ 
     if (err) { 
      console.log('resultado: ' + result); 
      console.log(err); 
      return res.send({'errores':err}); 
     } 
     else { 
      return res.send({'result':result,'status':'successfully saved'}); 
     } 
    }); 

}; 

そしてそれは働きました!誰もがなぜこれが起こっているのを知っていますか? ありがとう!

+0

あなたは修復で体を解析するために何を使用していますか? – HeadCode

+0

私はapp.js(サーバー)のボディパーサーを次のように使います: 'app.use(restify.bodyParser());' – Omar

+0

これが当てはまる場合、Angularは追加のデータラッパーを作成しています。 bodyParserを使ってベアボーン復元アプリケーションを作成し、それをカールで叩くことで、自分自身で確認できます。 – HeadCode

関連する問題