Clean way of posting form data with Angular?

Question

I was wondering, what's the clean way of posting form data with angular?

I have this form setup

<div id="contact-form" class="row">
    <div class="col-sm-4 col-sm-offset-4 text-center">
        <form>
            <div class="form-group">
                <input type="text" class="form-control input-lg text-center" placeholder="Firstname" name="firstname" ng-model="firstname">
            </div>

            <div class="form-group">
                <input type="text" class="form-control input-lg text-center" placeholder="Lastname" name="lastname" ng-model="lastname">
            </div>

            <div class="form-group">
                <input type="email" class="form-control input-lg text-center" placeholder="Email" name="email"ng-model="email">
            </div>
            <!-- Submit Contact -->
            <button type="submit" class="btn btn-primary btn-lg" ng-click="createContact()">Add</button>
        </form>
    </div>
</div>

and I'm posting this to a node.js backend "api".

How do I do this correctly? Do I write every api request in 1 core file? Do I make separate files for each page?

And then how I do I write a clean request?

$scope.createContact = function() {
    $http.post('/contacts', ...)
        .success(function(data) {

        })
        .error(function(data) {

        });
};

I want to process 'lastname', 'firstname' and 'email' to add a new contact, but online I can't find a good, clean way to write this.

Here's my model in case it helps:

var mongoose = require('mongoose');

var ContactSchema = new mongoose.Schema({
  firstname: { type: String, require: true },
  lastname: { type: String, require: true },
  email: { type: String, require: true }
});

module.exports = mongoose.model('Contact', ContactSchema);

Here's the code I used in the end.

$scope.createContact = function(contact) {

    $scope.contact = { firstname: $scope.firstname, lastname: $scope.lastname, email: $scope.email };

    $http.post('/contacts', $scope.contact)
        .success(function(data) {
            $scope.contact = {firstname:'',lastname: '', email:''}; // clear the form so our user is ready to enter another
            $scope.contacts = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

Your title has Angular 2 but the tag is angularjs and you use $scope and $http which are all angular 1x. I updated your title and removed the 2. — Igor
– Igor, Commented Oct 21, 2016 at 15:22

Tim Aagaard · Accepted Answer · 2016-10-21 16:20:34Z

1

How you structure your project is up to you. You could do it all in one file (but that's not very scalable), You could do one in each file (I wouldn't recommend it), or you could group them into semantic files like user_routes.js, social_media_routes.js, etc.

You are on the right track using $http.post() You'll want to create a JSON using your bound variables. You haven't included your entire controller so it's hard to tell you what to do. But a better way of doing this would probably just to create a JSON with empty values like this:

$scope.contact = {
    firstname: '',
    lastname: '',
    email: '',
}

and then use something like ng-model="contact.firstname" for your data-binding. This will let you simply send $scope.contact to the back-end route.

The back-end route in Express would look something like:

var express = require('express');
var app = express();
app.post('/contacts', function (req, res) {
    res.status(200).send(req)
}

This will send back what it receives - That should be enough to get you started - Handling POST requests in Express will depend on what version of Express you are using.

edited Oct 21, 2016 at 16:20

answered Oct 21, 2016 at 15:40

Tim Aagaard

5385 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nicolas Over a year ago

hmm, in this case I have to use angular for the front-end and make a restfull api in node.js as back-end

Tim Aagaard Over a year ago

@Nicolas I have updated my answer with what I believe you are trying to achieve

Tim Aagaard Over a year ago

@Nicolas On the Express side of things you may have to use bodyParser(). On your Angular side of things you should probably have to JSON.stringify() your data before sending it

Danilo Velasquez · Accepted Answer · 2016-10-21 16:21:32Z

1

In the form tag add the attribute ng-submit to trigger directly in angular the post function.

<div id="contact-form" class="row">
<div class="col-sm-4 col-sm-offset-4 text-center">
    <form ng-submit="createContact(user)">
        <div class="form-group">
            <input type="text" class="form-control input-lg text-center" placeholder="Firstname" name="firstname" ng-model="user.firstname">
        </div>

        <div class="form-group">
            <input type="text" class="form-control input-lg text-center" placeholder="Lastname" name="lastname" ng-model="user.lastname">
        </div>

        <div class="form-group">
            <input type="email" class="form-control input-lg text-center" placeholder="Email" name="email"ng-model="user.email">
        </div>
        <!-- Submit Contact -->
        <button type="submit" class="btn btn-primary btn-lg">Add</button>
    </form>
</div>

Add an empty user object in the controller:

$scope.user = {firstname:'',lastname: '', email:''};

Let the $http service handle the call:

$scope.createContact = function(user) {
$http.post('/contacts', user)
    .then(function(data) {
        //in data.data is the result of the call
    },function(error) {
        //here is the error if your call dont succeed
    });};

answered Oct 21, 2016 at 16:21

Danilo Velasquez

5012 silver badges12 bronze badges

1 Comment

Nicolas Over a year ago

thanks for you help, I used this to solve the issue!

Collectives™ on Stack Overflow

Clean way of posting form data with Angular?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related