Ember.js: how to submit a form?

Question

Ember.js

Somewhere I saw a message that ember.js "out of the box" does not know how to work with forms.
But I found an example like this:

<form class='form-inline' {{action "auth" on="submit"}}>
  <div class="form-group">
    <label for="loginField">Login</label>
    <input type="text" class="form-control" id="loginField" placeholder="" name='login'>
  </div>
  <div class="form-group">
    <label for="passwordField">Password</label>
    <input type="password" class="form-control" id="passwordField" placeholder="">
  </div>
  <button type="submit" class="btn btn-primary">Enter</button>
</form>

Added this code to application.hbs → the form was rendered. I press Enter → the auth function from the application.js file is called:

export default Ember.Route.extend({
  actions: {
    auth() {
        console.log(arguments);
    },

But arguments are empty. How to send form data to restful api?
Does Ember.js really require an add-on to work with forms?

Answer 1

The example will work like this:

<form class='form-inline' {{action "auth" on="submit"}}>
  <div class="form-group">
    <label for="loginField">Login</label>
    {{input value=login type="text" class="form-control" id="loginField" placeholder="" name='login'}}
  </div>
  <div class="form-group">
    <label for="passwordField">Password</label>
    {{input value=password type="password" class="form-control" id="passwordField" placeholder=""}}
  </div>
  <button type="submit" class="btn btn-primary">Enter</button>
</form>

export default Ember.Route.extend({
  login: null,
  password: null,

  actions: {
    auth() {
        let {login, password} = this.getProperties('login', 'password');

        console.log(login, password);
    },

Depends on the method (libraries used) of authorization. I highly recommend looking into the ember-simple-auth library .
Here is my snippet for the registration form:

// app\templates\registration.hbs

<div class="row align-center align-middle">
  <div class="medium-6 large-4 columns">
    <form {{action 'registration' on='submit'}} class="registration-form">
      <h3 class="text-center">Регистрация</h3>

      {{form-control label="E-mail" value=email errors=errors.email}}
      {{form-control type='password' label="Пароль" value=password errors=errors.password}}
      {{form-control type='password' label="Повторите пароль" value=password_confirmation errors=errors.password-confirmation}}

      <div class="row">
        <div class="small-4 columns">
          {{fz-button type="submit" text="Зарегистрироваться" isLoading=isLoading}}
        </div>
        <div class="small-8 columns text-right">
          {{#link-to 'login' class="button link"}}Войти{{/link-to}}
        </div>
      </div>
    </form>
  </div>
</div>

// app\controllers\registration.js

import Ember from 'ember';
import DS from 'ember-data';

export default Ember.Controller.extend({
  session: Ember.inject.service(),

  email: null,
  password: null,
  password_confirmation: null,
  errors: null,
  isLoading: false,

  actions: {
    registration() {
      let store = this.get('store');
      let attributes = this.getProperties('email', 'password', 'password_confirmation');
      let adapter = store.adapterFor('user');
      let url = adapter.urlForCreateRecord('user');
      let data = {
        type: 'user',
        attributes: attributes
      };

      this.set('errors', null);
      this.set('isLoading', true);

      adapter.ajax(url, "POST", { data: { data: data } })
        .then(() => {
          // Логиним пользователя сразу после регистрации
          this.get('session').authenticate('authenticator:oauth2', attributes.email, attributes.password);
        })
        .catch((payload) => {
          this.set('errors', DS.errorsArrayToHash(payload.errors));
        })
        .finally(() => {
          this.set('isLoading', false);
        });
    }
  }
});

Where form-control are application components.
No. But they are more comfortable.
Also, to work with bootstrap, it can be convenient to use ember-bootstrap .