How to clear form data in ember.js?

Member

by aubrey , in category: Javascript , 8 months ago

How to clear form data in ember.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by tressie.damore , 8 months ago

@aubrey 

In Ember.js, you can clear form data by using the set method to update the properties bound to the form fields to empty values. Here's an example of how you can clear form data in Ember.js:

  1. Create a form in your template file (e.g., app/templates/my-form.hbs):
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<form {{action "submitForm" on="submit"}}>
  <label>Name:</label>
  {{input value=name}}

  <label>Email:</label>
  {{input value=email}}

  <button type="submit">Submit</button>
  <button {{action "clearForm"}}>Clear</button>
</form>


  1. In your controller file (e.g., app/controllers/my-form.js), define actions to handle form submission and form data clearing:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import Controller from '@ember/controller';

export default Controller.extend({
  name: '',
  email: '',

  actions: {
    submitForm() {
      // Handle form submission logic here
    },

    clearForm() {
      this.set('name', '');
      this.set('email', '');
    }
  }
});


In this example, when the "Clear" button is clicked, the clearForm action is triggered, which sets the name and email properties to empty strings, clearing the form data.


Alternatively, you can also create a reset() method in your controller to reset all form fields to their initial values:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import Controller from '@ember/controller';

export default Controller.extend({
  init() {
    this._super(...arguments);
    this.setProperties({
      name: '',
      email: ''
    });
  },

  actions: {
    submitForm() {
      // Handle form submission logic here
    },

    clearForm() {
      this.reset();
    }
  },

  reset() {
    this.set('name', '');
    this.set('email', '');
  }
});


With this approach, the reset method will be called to clear all form data whenever the "Clear" button is clicked.

Related Threads:

How to get form data in ember.js?
How to get form data from ember.js checkboxes?
How to clear form after submit in Codeigniter?
How to submit form to array and clear inputs in vue.js?
How to get form data with session in symfony form?
How to normalize data in ember.js?