Home > other >  MEAN Stack How to save data from radio type AngularJS form into MongoDB
MEAN Stack How to save data from radio type AngularJS form into MongoDB

Time:10-16

I'm going nuts!

I have a multistep form to get information based on user choice. All of the choices are type = radio except name because it takes text as type. For that form, I've used AngularJS (I know it is EOL) with ui-router.

formCtrl.js

.controller('formController', function($scope, $http) {
    
    // we will store all of our form data in this object
    $scope.formData = {};

    $scope.regForm = function(formData){
        $http.post('/api/forms', JSON.stringify($scope.formData))
        .success(function(data,status){
            console.log("success");
        });
    }  
});

After submitting the form I get

Request URL: http://localhost:8080/api/forms
Request Method: POST
Status Code: 200 OK

And payload

{
  "area": "sell clothes",
  "type": "basic",
  "name": "asdas",
  "tema": "boho"
}

But because of backend in express, Preview looks like this, came from api.js

success: false, message: "Ensure completing all the fields!"}
message
: 
"Ensure completing all the fields!"
success
: 
false

api.js

var Form = require("../models/form");

module.exports = function (router) {
  // http://localhost:8080/api/forms

  router.post("/forms", function (req, res) {
    // res.send('Testing users route');

    var form = new Form();
    form.area = req.body.area;
    form.responsive = req.body.responsive;
    form.name = req.body.name;
    form.tema = req.body.tema;


    if (
      req.body.area == null ||
      req.body.responsive == null ||
      req.body.name == null ||
      req.body.area == "" ||
      req.body.tema == null
    ) {
      res.json({
        success: false,
        message: "Ensure completing all the fields!",
      });
    } else {
      form.save(function (err) {
        //check if there is an error
        if (err) {
          res.json({ success: false, message: "Complete all the fields!" });
          console.log(err);
        } else {
          res.json({ success: true, message: "Form created!" });
        }
      });
    }
  });

  return router;
};

So the problem is, I can get 200 OK message but doesn't pass through express in here

 var form = new Form();
        form.area = req.body.area;
        form.responsive = req.body.responsive;
        form.name = req.body.name;
        form.tema = req.body.tema;

But if I use Postman and make a post request in body JSON I can save it to MongoDB. So somehow, AngularJS and Express cannot communicate.

What it is the right way for me to get formData from user choice that are radio options and send it to a database in the MongoDB???

Where am I doing wrong?

CodePudding user response:

for setup angular and backend with submit form data to the mongodb please refer https://www.cdata.com/kb/tech/mongodb-odata-angularjs.rst

CodePudding user response:

Instead of req.body.responsive it should be req.body.type since the data is type instead of responsive!

For anyone trying to use angularjs form and save it to mongodb can use it. Both frontend and backend part is working!

  • Related