Angular form not getting submitted with ng-submit

Question

I am new to AngularJS. Just started my first demo project. The form is not getting submitted through the index.html. However if I try with the Template Html it submits the form. I have also tried with ng-click with submit button. Still it doesn't work. What am I missing here?

index.html

 <html ng-app="angularFormsApp"> <head> <title></title> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <script src="Scripts/angular.min.js"></script> <script src="app/AngularFormsApp.js"></script> <script src="app/EmployeeForm/efController.js"></script> <script src="app/EmployeeForm/efDirective.js"></script> <script src="app/EmployeeForm/efService.js"></script> </head> <body ng-controller="efController" class="container"> <employee-form/> </body> </html>

AngularFormsApp.js

 var angularFormsApp = angular.module('angularFormsApp', []);

efController.js

 angularFormsApp.controller('efController', function efController($scope, efService) { $scope.employee = efService.employee; $scope.departments = [ "Engineering", "Marketing", "Finance", "Administration"]; $scope.submitForm = function () { } });

efDirective.js

 angularFormsApp.directive('employeeForm', function() { return { restrict: 'E', templateUrl: 'app/EmployeeForm/efTemplate.html' } });

efService.js

 angularFormsApp.factory('efService', function() { return { employee: { fullName: "Wilton Adams", notes: "The ideal employee. Just don't touch his red stapler.", department: "Administration", perkCar: true, perkStock: false, perkSixWeeks: true, payrollType: "none" } } } );

efTemplate.html

 <form class="form-horizontal" role="form" ng-submit="submitForm()"> <fieldset> <legend>Basic Information</legend> <div class="form-group"> <label for="fullName" class="col-sm-3 control-label">Name</label> <div class="col-sm-9"> <input type="text" id="fullName" name="fullName" class="form-control" ng-model="employee.fullName" /> </div> </div> <div class="form-group"> <label for="notes" class="col-sm-3 control-label">Notes</label> <div class="col-sm-9"> <textarea name="notes" id="notes" class="form-control" rows="5" cols="40" ng-model="employee.notes"></textarea> </div> </div> <div class="form-group"> <label for="department" class="col-sm-3 control-label">Department</label> <div class="col-sm-9"> <select name="department" id="department" class="form-control" ng-model="employee.department" ng-options="dept for dept in departments"></select> </div> </div> </fieldset> <br /> <fieldset> <legend>Perks</legend> <div class="form-group"> <div class="col-sm-3"></div> <div class="col-sm-9"> <div class="checkbox"> <label> <input type="checkbox" value="perkCar" ng-model="employee.perkCar" />Company Car </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="perkStock" ng-model="employee.perkStock" />Stock Options </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="perkSixWeeks" ng-model="employee.perkSixWeeks" />Six Weeks Vacation </label> </div> </div> </div> </fieldset> <br /> <fieldset> <legend>Payroll Type</legend> <div class="form-group"> <div class="col-sm-3"></div> <div class="col-sm-9"> <div class="radio"> <label> <input type="radio" name="payrollType" value="w2" ng-model="employee.payrollType" />W-2 </label> </div> <div class="radio"> <label> <input type="radio" name="payrollType" value="ten99" ng-model="employee.payrollType" />1099 </label> </div> <div class="radio"> <label> <input type="radio" name="payrollType" value="none" ng-model="employee.payrollType" />None </label> </div> <br /> </div> </div> </fieldset> <div class="col-sm-offset-3 col-sm-9"> <input type="submit" class="btn btn-primary" value="Submit" /> </div> </form>

Answer 1

you should load efService.js before loading efController.js

<script src="app/AngularFormsApp.js"></script>
<script src="app/EmployeeForm/efService.js"></script>
<script src="app/EmployeeForm/efController.js"></script>

Answer 2

Its working now. Being the first app, i was trying to debug with toggle point. When I inserted an alert inside the submitForm() it showed the alert.It works with both the ng-click and ng-submit. Sometimes I can be too silly :D

Angular form not getting submitted with ng-submit

Question

2 answers

solution1
0 2015-05-14 05:31:38

solution2
0 ACCPTED 2015-05-25 01:22:40

Angular form not getting submitted with ng-submit

Question

2 answers

solution1 0 2015-05-14 05:31:38

solution2 0 ACCPTED 2015-05-25 01:22:40

solution1
0 2015-05-14 05:31:38

solution2
0 ACCPTED 2015-05-25 01:22:40