AngularJS submit call don't work

Question

I start with Angular JS and I can not find the answer on the forums.

I use Onsen UI with Angular and I try to make an AJAX request with Angular and just to submit it form it does not work

My Code :

ons.bootstrap()
.controller('contactController', function($scope) {
  $scope.submit = function () {
 alert('test');
 }
  });

And My form :

<form ng-controller="contactController" ng-submit="submit()" >

    <p>
      <ons-input id="motif_contact"  placeholder="Motif du contact"
                 float ng-model="contact.motif">
      </ons-input>
    </p>
    <p>
      <ons-input id="email_contact"  placeholder="Adresse e-mail"
                 float ng-model="contact.email">
      </ons-input>
    </p>    <p>
     <textarea class="textarea--transparent" 
               style="border-bottom:1px solid grey;" 
               rows="3" placeholder="Votre message">
     </textarea>
    </p>
    <p>

    </p>
    <p style="margin-top: 30px;">
      <center><ons-button   >Envoyer</ons-button></center>
    </p>



</form>

One last question as long as I am, how does it recover the data of the form to send it via ajax?

Thanks

Answer 1

This is an example to trigger the submit function, it console.log the model contact in the browsers console, to check the model is correct. You need to call $http for an ajax request to a server or api endpoint.

i recoment to make a service for those and inject to the controller and simple call and send the arguments trought it.

controller

ons.bootstrap().controller('contactController', function($scope) {
    var vm = this;
      vm.contact = {
       motif:'',
       email:'',
       message:''
      };
      vm.submit = function () {
      console.log(vm.contact);
    }
  });

html

<form ng-controller="contactController as vm" ng-submit="vm.submit()" >
    <p>
      <ons-input id="motif_contact"  placeholder="Motif du contact"
             float ng-model="vm.contact.motif">
      </ons-input>
    </p>
    <p>
      <ons-input id="email_contact"  placeholder="Adresse e-mail"
             float ng-model="vm.contact.email">
      </ons-input>
    </p>    
    <p>
       <textarea class="textarea--transparent" 
           style="border-bottom:1px solid grey;" 
           rows="3" placeholder="Votre message" ng-model="vm.contact.message">
     </textarea>
    </p>
    <p>

    </p>
    <p style="margin-top: 30px;">
      <center><ons-button>Envoyer</ons-button></center>
    </p>
</form>