Forms in Ember

There is no special form abstraction in Ember Octane — bind value and on with tracked properties and handle submit with an action.

4 min read Level 2/5 #ember#forms#tracked

What you'll learn

Bind input value with value=this.field
Handle input events with the on modifier
Handle submit with on submit and prevent default

Ember Octane has no special “form” component — you wire up plain HTML inputs with {{on}} and tracked state. The data flow is explicit: value in, event out.

A Minimal Form

<form {{on "submit" this.save}}>
  <label>
    Name
    <input value={{this.name}} {{on "input" this.setName}} />
  </label>
  <button type="submit">Save</button>
</form>

The value={{this.name}} attribute drives what the input shows; the {{on "input"}} modifier writes the user’s typing back into tracked state.

The Component Class

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class SignupForm extends Component {
  @tracked name = '';

  @action
  setName(e) {
    this.name = e.target.value;
  }

  @action
  save(e) {
    e.preventDefault();
    // submit this.name somewhere
  }
}

Always preventDefault() on submit handlers — otherwise the browser does a full page navigation.

Validation

There is no built-in validator. Two common patterns:

Plain getters: get isValid() { return this.name.length > 0 }
Addons: ember-changeset and ember-changeset-validations give you a changeset object with validation rules and rollback support.

Text Inputs →