CODEWITHSUNDEEP
angularjs
user567
user567

Reputation: 3842

Submit a form with AngularJS

I am very new with AngularJs and I am trying to submit a form. I used yeoman to generate the angular application. This is the code in the main.html file

<div class="jumbotron">
  <h3>Test</h3>
  <br><br>
  <p class="lead">
    <form name="userForm" ng-submit="loadData()"  ng-controller="myCtrl">
        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
            <label>name*</label>
            <input type="text" name="name"  ng-model="name"class="form-control" ng-model="user.name" required>
        </div>
        <br><br>
        <button type="submit" class="btn btn-primary">submit</button> <br><br>
    </form>
  </p>
</div>

and this is the code in the main.js file

angular.module('myApp')
  .controller('MainCtrl', ['$scope', function($scope) 
  {



$scope.loadData = function() {
console.log('submited')
};

}]);

The loadData function never get called. When I added the code to the main.js file I started getting an error in the console, I don't know if it's related to the problem. 

Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.

Upvotes: 1

Views: 43

Answers (1)

Kamel Mili
Kamel Mili

Reputation: 1434

<div ng-app="myApp" ng-controller="MainCtrl" class="jumbotron">
<h3>Test</h3>
<br><br>
<p class="lead">
<form name="userForm" ng-submit="loadData()"  >
    <!-- NAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
        <label>name*</label>
        <input type="text" name="name"  ng-model="name"class="form-control" ng-model="user.name" required>
    </div>
    <br><br>
    <button type="submit" class="btn btn-primary">submit</button> <br><br>
   </form>
 </p>
</div>

you forgot to mention the ng-app and the name in controller doesn't match

Upvotes: 1

Related Questions