Submitting form from a modal in Ember - ember.js

Question

I am trying to make a registration page in ember which is opened when someone clicks the registration button. The registration page is opened in a modal. I used the modal implementation given on Ember websit
http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/
Now the registration form opens on clicking the button but I am not able to catch the submit event of the registration form anywhere. You can refer to the code here:
http://jsfiddle.net/jywPL/1/
<script type="text/x-handlebars">
{{outlet}}
{{outlet modal}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h4>Register</h5>
{{outlet}}
<button {{action 'openModal' 'modal' model}}>Register</button>
</script>
<script type="text/x-handlebars" data-template-name="modal">
{{#modal-dialog action="close"}}
<form class="form-horizontal" {{action "register" on="submit"}}>
<br/>
<div align="center" >
<table class="table-hover">
<tr>
<td>
<label>First Name</label>
</td>
<td>
{{input value=firstName class="controls" type="text"}}
</td>
</tr>
<tr>
<td>
<label>Last Name</label>
</td>
<td>
{{input value=lastName class="controls" type="text"}}
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
{{input value=email class="controls" type="text"}}
</td>
</tr>
<tr>
<td>
<label>Company</label>
</td>
<td>
{{input value=company class="controls" type="text"}}
</td>
</tr>
<tr>
<td>
<label>Company Contact</label>
</td>
<td>
{{input value=contact class="controls" type="text"}}
</td>
</tr>
<tr>
<td>
<label>Reason for request</label>
</td>
<td>
{{view Ember.TextArea valueBinding="reason" rows="10" cols="20"}}
</td>
</tr>
</table>
<br/>
<button type="submit">Register</button>
<button {{action "close"}}>Done</button>
</div>
</form>
{{/modal-dialog}}
</script>
<script type="text/x-handlebars" id="components/modal-dialog">
<div class="overlay" {{action "close"}}>
<div class="modal" {{action bubbles=false}}>
{{yield}}
</div>
</div>
</script>
var App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
actions: {
openModal: function(modalName, model) {
this.controllerFor(modalName).set('model', model);
return this.render(modalName, {
into: 'application',
outlet: 'modal'
});
},
closeModal: function() {
return this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
},
register: function() {
alert('hello');
}
}
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return Em.Object.create({firstName: '',lastName: '',email:'',company:'',contact:'',reason:''});
},
action: {
register: function(){
alert('Registering');
}
}
});
App.ModalController = Ember.ObjectController.extend({
actions: {
close: function() {
return this.send('closeModal');
},
register: function(){
alert('hello1');
}
}
});
App.ModalDialogComponent = Ember.Component.extend({
actions: {
close: function() {
return this.sendAction();
},
register: function(){
alert('hello2');
}
}
});
.I have tried to trigger action helper called register on form submit but the register action is not triggered. From the modal implementation I see that the action bubbling has been disabled so the action wouldn't be triggered in any of the parent routes. But why is it not triggering in ModalDialogComponent actions tag.

Answer 1

In your ModalController Route, add
action: {
doRegister: function() {
this.register(); //or whatever
}
Then on the submit button
<button type="submit" {{action "doRegister"}}>Register</button>
If your ModalController Route is binding correctly, this should work.