Having a hard time making a post request to a JSON file using angular

Question

there! Pretty new to Angular and Javascript in general, I'm trying to make a simple one page toy app where you can add and view customers using a JSON file as storage. I've been able to get my JSON to display but I've gotten stuck on adding new entries using a form. I've been checking in on the server and when I click submit not post request is made. Any help would be much appreciated! thanks!

this is my form

<div ng-controller="CustomerAddController as addCtrl">
  <form
  ng-submit="addCtrl.addCustomer()" novalidate>
    <h2>Add a new customer </h2>
    <fieldset ng-model="addCtrl.customer.name">Name: <input type="text"/></fieldset>

    <fieldset ng-model="addCtrl.customer.email">Email: <input type="email"/></fieldset>
    <fieldset ng-model="addCtrl.customer.phone">phone: <input type="text"/></fieldset>
    <h3>Address</h3>
    <fieldset ng-model="addCtrl.customer.street">Street: <input type="text"/></fieldset>
    <fieldset ng-model="addCtrl.customer.city">City: <input type="text"/></fieldset>
    <fieldset ng-model="addCtrl.customer.state">State: <input type="text"/></fieldset>
    <fieldset ng-model="addCtrl.customer.zip">Zip: <input type="text"/></fieldset>
    <input type="submit" value="Submit"/>
  </form>
</div>

and this is my app.js file

'use strict';
var app = angular.module('app', [ ]);
app.controller('CustomerListController', function($scope, $http){
    $http.get('customers.json').then(function(res){
      $scope.customers = res.data;
   });
});

app.controller('CustomerAddController', function($scope, $http){
    $scope.addCustomer = function() {
     $http.post('customers.json').then(function(res){
         $scope.customers = res.data;
     })
     .success(function(data){
          console.log(data);
          if (!data.success) {
            $scope.errorName = data.errors.name;
          } else {
            $scope.message = data.message;
          }
      });

    };
});

Answer 1

Very 1st thing you should to is,

Attach ng-model directive to input fields not to fieldset , as they are only tends to work with input & textarea

<form ng-submit="addCtrl.addCustomer()" novalidate>
    <h2>Add a new customer </h2>
    <fieldset>
      Name: <input type="text" ng-model="addCtrl.customer.name" />
    </fieldset>
    <fieldset>
        Email: <input type="email" ng-model="addCtrl.customer.email" />
    </fieldset>
    <fieldset>
        phone: <input type="text" ng-model="addCtrl.customer.phone" />
    </fieldset>
    <h3>Address</h3>
    <fieldset>
        Street: <input ng-model="addCtrl.customer.street" type="text" />
    </fieldset>
    <fieldset>
        City: <input ng-model="addCtrl.customer.city" type="text" />
    </fieldset>
    <fieldset>
        State: <input ng-model="addCtrl.customer.state" type="text" />
    </fieldset>
    <fieldset>
        Zip: <input ng-model="addCtrl.customer.zip" type="text" />
    </fieldset>
    <input type="submit" value="Submit" />
</form>

Other than that as you are using controllerAs so controller data should bounded to this context. Also post calls seems to have .json in URL, which should be actual server URL , so those parameter will get passed with payload & don't forget to pass data in post request as @Kyle pointed out in below answer.

var app = angular.module('app', [ ]);

app.controller('CustomerListController', function($http){
  var self = this;
  $http.get('customers.json').then(function(res){
     self.customers = res.data;
  });
});

app.controller('CustomerAddController', function($http){
     var self = this;
     self.addCustomer = function() {
     //below serverUrl would be server where you configured post request
     //pass self.customer in that, will pass whole customer filled form
     $http.post(serverUrl, self.customer).then(function(res){
         self.customers = res.data;
     })
     .success(function(data){
          console.log(data);
          if (!data.success) {
            self.errorName = data.errors.name;
          } else {
            self.message = data.message;
          }
      });
    };
});

Answer 2

You need to send data with your $http.post()

$http.post("customers.json",data).then...

https://docs.angularjs.org/api/ng/service/$http