AngularJS form input gets undefined

Question

I use a lot of forms in my app, but for some reason, one of them (the simplest one, actually) doesn't work properly. When I submit it, the value of the input which is given by my console.log is "undefined".

I'm pretty sure it's a very simple mistake, but I can't see it.

I tried to use "form = 'forgottenForm' " in my inputs, I also tried ng-model but it's useless since I'm not displaying the value of "email", I just want to submit it and then perform some database operations.

HTML

<form name="forgottenForm" id='forgottenForm' novalidate="" ng-controller="forgottenCtrl">
    <label class="forgotten-item item item-input">
        <input type="text" name="forgottenEmail" required>
    </label>
    <button type="submit" class="button" ng-click="submitForgotten(forgottenEmail)">Valider</button>
</form>

JavaScript

angular.module('ionicApp').controller("forgottenCtrl", function($scope, $http, $ionicPopup, $cookies, $rootScope, $window, $q){
    $scope.submitForgotten = function(forgottenEmail){
        console.log(forgottenEmail);
    }
})

change to ng-model="forgottenEmail" (you can also have ng-submit on the form itself instead of ng-click on your button) — Aleksey Solovey
– Aleksey Solovey, Commented Dec 20, 2017 at 14:25
Yeah that was it, I don't know why I figured that the parameter read was "name" and not "ng-model". Thank you for that. — Reyedy
– Reyedy, Commented Dec 20, 2017 at 14:26
@AlekseySolovey, you should change that comment to an answer :) — Steve Danner
– Steve Danner, Commented Dec 20, 2017 at 14:58
While I like the spirit and agree with you to a degree, a true, good answer (such as yours) marked as THE answer by the OP may help many others in the future. — Steve Danner
– Steve Danner, Commented Dec 20, 2017 at 18:11

Aleksey Solovey · Accepted Answer · 2017-12-21 09:49:13Z

1

This will work,

You have to declare a variable in $scope like $scope.email=''
Then you need to set it like this <input type="text" ng-model='email' name="forgottenEmail" required>

Actually you don't need to pass the variable submit function

angular.module('ionicApp').controller("forgottenCtrl", function($scope, $http, $ionicPopup, $cookies, $rootScope, $window, $q) {
  $scope.email = '';
  $scope.submitForgotten = function() {
    console.log($scope.email);
  }
})

<form name="forgottenForm" id='forgottenForm' novalidate="" ng-controller="forgottenCtrl">
  <label class="forgotten-item item item-input">
     <input type="text" ng-model='email' name="forgottenEmail" required>
  </label>
  <button type="submit" class="button" ng-click="submitForgotten()">Valider</button>
</form>

edited Dec 21, 2017 at 9:49

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

answered Dec 21, 2017 at 3:11

Chaminda Jayanath Udawatte

1648 bronze badges

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

1 Comment

Reyedy Over a year ago

I give you a "thumb up" because I know this works, but I don't mark the answer as accepted, because I was waiting for something which doesn't change the structure of the form (someone corrected me in the comments). But thank you for your answer. :)

Reyedy · Accepted Answer · 2018-05-30 13:21:40Z

0

The answer was to change to ng-model="forgottenEmail".

It is also possible to have ng-submit on the form itself instead of ng-click on the button.

Thanks to Aleksey Solovey for the answer! :)

answered May 30, 2018 at 13:21

Reyedy

9082 gold badges13 silver badges36 bronze badges

Collectives™ on Stack Overflow

AngularJS form input gets undefined

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related