Submitting AngularJS form to linked Mongoose model

Question

I'm using mean.js and want to create two form. One for the website and another for website page template.

Website API POST route is /api/websites

Page Template API POST route is /api/websites/:websiteId/page-templates

Website model modules/websites/server/models/website.server.model.js

var WebsiteSchema = new Schema({
  name: {
    type: String,
    default: '',
    required: 'Please fill Website name',
    trim: true
  },
  domain: {
    type: String,
    required: 'Please fill a correct domain name',
    trim: true
  },
  active: {
    type: Boolean,
    default: true,
    required: true
  },
  country: {
    type: String,
    required: true
  },
  created: {
    type: Date,
    default: Date.now
  },
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  }
});

Page Template model modules/websites/server/models/page-template.server.model.js

var PageTemplateSchema = new Schema({
  website: {
    type: Schema.ObjectId,
    required: 'Website object not found'
  },
  template_name: {
    type: String,
    trim: true,
    required: 'Please enter template name'
  },
  art_name_dom: {
    type: String,
    trim: true
  },
  active: {
    type: Boolean,
    default: true,
    required: true
  },
  created: {
    type: Date,
    default: Date.now
  },
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  }
});

Angular form for the website is working fine but the error appears on page template form

A snippet of Page Template form modules/websites/client/views/page-templates/form-page-template.client.view.html

...
 <p class="card-description">Website: <a href="{{vm.website.domain}}" target="_blank">{{vm.website.name}}</a></p>
 <form name="vm.form.pageTemplateForm" class="forms-sample" ng-submit="vm.save(vm.form.pageTemplateForm.$valid)"
              novalidate>
...

Controller modules/websites/client/controllers/page-templates/page-templates.client.controller.js

angular
    .module('websites')
    .controller('PageTemplatesController', PageTemplatesController);

  PageTemplatesController.$inject = ['$scope', '$state', '$window', 'Authentication', 'websiteResolve', 'pageTemplateResolve', 'Notification'];

  function PageTemplatesController($scope, $state, $window, Authentication, website, pageTemplate, Notification) {
    var vm = this;

    vm.authentication = Authentication;
    vm.page_template = pageTemplate;
    vm.website = website;
    vm.error = null;
    vm.form = {};
    vm.save = save;

    // Save Website
    function save(isValid) {
      if (!isValid) {
        $scope.$broadcast('show-errors-check-validity', 'vm.form.pageTemplateForm');
        return false;
      }

      vm.page_template.createOrUpdate()
        .then(successCallback)
        .catch(errorCallback);

      function successCallback(res) {
        $state.go('websites.view'); // should we send the User to the list or the updated Article's view?
        Notification.success({ message: '<i class="glyphicon glyphicon-ok"></i> Article saved successfully!' });
      }

      function errorCallback(res) {
        Notification.error({ message: res.data.message, title: '<i class="glyphicon glyphicon-remove"></i> Article save error!' });
      }
    }
  }

Website form is working fine. The error is coming with the page template form. As far as I can understand, the page template form is not able to reference website to store.

Getting this error on form submission

Answer 1

I had to target the $resource object of Angular and define the URL for query method manually like this

function PageTemplatesService($resource, $log) {
    var PageTemplate = $resource('/api/websites/:websiteId/page-template/:pageTemplateId', {
      pageTemplateId: '@_id',
      websiteId: '@_id'
    }, {
      save: {
        url: '/api/websites/:websiteId/page-templates',
        method: 'POST'
      },
      query: {
        url: '/api/websites/:websiteId/page-templates'
      },
      update: {
        method: 'PUT'
      }
    });
....