How to clear form data in ember.js?
How to clear form data in ember.js?
1 answer
by
tressie.damore ,
4 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:
- 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>
|
- 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.