Parameter is not passed to the function on ng-submit

Question

I have a function reset(username) that outputs whatever is entered into the input field of ng-model="username". Why is it not appearing in console though?

This is my function

$scope.reset = function (username) {
   console.log(username);
};

and the way I submit the form

<form name="Form" ng-controller="ResetController" ng-submit="reset(username)">
<div>
   <div class="row top5">        
      <label for="username">Username</label>
      <div class="col-xs-4">
         <input type="text" id="username"  placeholder="" maxlength="255"
          ng-model="username" required autofocus>
      </div>  

   <div>
      <div class="col-xs-5">          
         <button translate class="btn btn-secondary" type="submit">Reset</button>
      </div>
   </div>
</div>   
</form>

Controller as requested

app.controller("ResetController", function ($scope) {
   $scope.username='';
   $scope.reset = function (username) {
      console.log('username = ', username);
   };
});

Your code looks work fine. Can you post a working code snippet using codepen/jsfiddle/plunker etc? That would be easy to debug. — Vikasdeep Singh, Jun 04 '18 at 14:05
You do not need to pass the `username` since it is already defined in the `controller`. You can access it therefrom. — mahan, Jun 04 '18 at 14:15

score 2 · Accepted Answer · answered Jun 04 '18 at 14:07

I believe you do have the ng-app and everything else besides this form, however it is better handled by the DOM if you manipulate your inputs as properties of an object and not directly as $scope. properties. See answers to this here. And note in the code how I attached username to $scope.object.username

var app = angular.module('myApp',[])

app.controller('ResetController',['$scope',function($scope){

   $scope.object = {};
   $scope.reset = function(username){
    console.log(username);
   };
   
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <form name="Form" ng-controller="ResetController" ng-submit="reset(object.username)">
  <div>
     <div class="row top5">        
        <label for="username">Username</label>
        <div class="col-xs-4">
           <input type="text" id="username"  placeholder="" maxlength="255"
            ng-model="object.username" required autofocus>
        </div>  

     <div>
        <div class="col-xs-5">          
           <button translate class="btn btn-secondary" type="submit">Reset</button>
        </div>
     </div>
  </div>  
  </form>
</div>

Works fine. Thank you :) – LazioTibijczyk Jun 04 '18 at 14:11 — LazioTibijczyk, Jun 04 '18 at 14:11

Parameter is not passed to the function on ng-submit

1 Answers1