0

I am trying to submit a simple contact form. The form is inside a bootstrap modal (don't think that makes any difference) but the controller is in a directive.

The html for the form is as followed:

<form name="contactForm" ng-submit="contactForm()" novalidate>
                <div class="form-group">
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <input type="text" placeholder="Full name" name="name" ng-minlength="3" max="20"
                               ng-model="name" id="name" class="form-control">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <input type="email" ng-minlength="4" placeholder="Email address" name="contactEmail"
                               ng-model="email" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <input type="text" ng-model="subject" name="subject" ng-minlength="10" id=""
                               placeholder="Subject" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <textarea class="form-control" ng-model="message" name="message" ng-minlength="10"
                                  placeholder="Your message"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" value="Submit" />
                    </div>
                </div>
            </form>

Which i think is all good. The body of my controller looks like this

    $rootScope.contactForm = contactForm();

function contactForm() {
  console.log('triggered!');
  var contactFormVars = {
    name: $rootScope.name,
    contactEmail: $rootScope.contactEmail,
    subject: $rootScope.subject,
    message: $rootScope.message
  }

  // With Promise
  Stamplay.Object('contactform')
    .save(contactFormVars)
    .then(function(res) {
      console.log('yes!');
    }, function(err) {
      console.log('No!');
    })

}

return directive;

};

EDIT: Controller now looks like this:

function contactForm($rootScope,$stamplay,$q) {
  $rootScope.data = {}

  $rootScope.data = {
    name: $rootScope.data.name,
    contactemail: $rootScope.data.contactemail,
    subject: $rootScope.data.subject,
    message: $rootScope.data.message
  }
  Stamplay.Object("contactform")
    .save($rootScope.data, function (err, res) {
      console.log(res);
      console.log(err);
      // res is the new car object
    });
}

When i click the submit button I get the following error which i've been Googling

Error: v2.contactForm is not a function. (In 'v2.contactForm()',     'v2.contactForm' is an instance of FormController)
fn

Any help with this is appreciated.

EDIT

Ok so now i've moved the js from a directive and placed it in to the main controller. At the moment its not making any difference, only that the error has changed very slightly:

angular.js:12722Error: v4.contactForm is not a function. (In 'v4.contactForm(ensureSafeObject(v5,text))', 'v4.contactForm' is an instance of FormController)

fn

Not sure what the difference between v2 and v4 is.

Any advice to get past this blocker is appreciated.

devon93
  • 165
  • 2
  • 11
  • Why do you have: ` $rootScope.contactForm = contactForm();` – IsraGab Feb 18 '16 at 21:43
  • Yeah i added that as a possible solution from another SO question, but i'll take it out. – devon93 Feb 18 '16 at 21:47
  • Looks like the `contactForm` name is having a conflict. try `
    ` and `$rootScope.submitContactForm= contactForm;`
    – Narain Mittal Feb 18 '16 at 21:54
  • try to put `function contactForm()` before `$rootScope.contactForm = contactForm();` and in your html, replace `ng-submit="contactForm()"` to `ng-submit="$root.contactForm()"`. Let me know if it works – IsraGab Feb 18 '16 at 22:56
  • @IsraGab Thanks for your comment. Unfortunately that didn't do it. Also, the form seems to fire on page load, which i don't get. – devon93 Feb 20 '16 at 16:54
  • @IsraGab I've now taken the form out of the directive and its now in the main controller and the form itself in the main template. Still not made any difference. I've mad updates above. Any direction on this is appreciated – devon93 Feb 26 '16 at 21:39
  • Hi @devon93 it looks like you are assigning the result of contactForm to `$rootScope.contactForm`. This is what causes it to fire on page load. Instead try assigning the function definition to `$rootScope.contactForm`. Also I would avoid naming the `name` attribute and the `ng-submit` value the same as this will cause issues most likely. – Isaiah Grey Mar 13 '16 at 01:15

0 Answers0