Submit a form with AngularJS

Question

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.

you have linting problem in your code, you code is correct. Just format your code and check for any failed linting rules — Yaser
– Yaser, Commented Feb 20, 2017 at 21:56
Compare your controller name in .html and .js... They are different (myCtrl and MainCtrl) — The.Bear
– The.Bear, Commented Feb 20, 2017 at 22:29
The <input> element is erroneous with two ng-model directives. — georgeawg
– georgeawg, Commented Feb 21, 2017 at 5:07

Kamel Mili · Accepted Answer · 2017-02-21 02:30:58Z

1

<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

answered Feb 21, 2017 at 2:30

Kamel Mili

1,4643 gold badges20 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Submit a form with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related