ember form in route returns undefined

Question

I am fairly new to Ember. When I click submit, the console shows that this.getProperties is returning undefined for both email and password inputs. I am not sure what is missing here. Login is a route.

login.hbs:

<div class="login">
    <div class="login-info">
      <b>LOGIN TO PROCEED.</b>
    </div>
    <div class="form">
      <form {{action 'authenticate'}} on='submit'>
          <label for="email"><small>EMAIL</small></label>
          <br>
          {{input value=email placeholder='Enter Email' class='form-control' type='text'}}
          <br>
          <label for="password"><small>PASSWORD</small></label>
          <br>
          {{input value=password placeholder='Enter Password' class='form-control' type='password'}}
          <br>
          <div class="login-button">
              <button type="submit">
              Login 
          </button>
          </div>
      </form>
   </div>
</div>

login.js

import Ember from 'ember';

export default Ember.Route.extend({
    session: Ember.inject.service('session'),
    actions: {
        authenticate() {
            let {email, password} = this.getProperties('email','password');
            Ember.Logger.info("email: ",email," password: ",password);\\this shows undefined for both email and password
            this.get('session').authenticate('authenticator:oauth2', email, password).then(() => {
                Ember.Logger.info("login successful");
            }, (err) => {
                Ember.Logger.info("login unsuccessful. message: ",err.errors);
            });
        }
    }
});

Igor Igor · Accepted Answer · 2016-06-08T20:05:10

The properties you use in templates are actually part of the controller, not route. So if you try to log this.controller.get('email) in your route, you should be able to get a proper value.

ember form in route returns undefined

1 Answers