{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/7807","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/7807/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/7807/comments","events_url":"https://api.github.com/repos/angular/angular/issues/7807/events","html_url":"https://github.com/angular/angular/issues/7807","id":144277111,"number":7807,"title":"[ngForm] does not raise (ngSubmit) like <form> does","user":{"login":"Meligy","id":171637,"avatar_url":"https://avatars.githubusercontent.com/u/171637?v=3","gravatar_id":"","url":"https://api.github.com/users/Meligy","html_url":"https://github.com/Meligy","followers_url":"https://api.github.com/users/Meligy/followers","following_url":"https://api.github.com/users/Meligy/following{/other_user}","gists_url":"https://api.github.com/users/Meligy/gists{/gist_id}","starred_url":"https://api.github.com/users/Meligy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Meligy/subscriptions","organizations_url":"https://api.github.com/users/Meligy/orgs","repos_url":"https://api.github.com/users/Meligy/repos","events_url":"https://api.github.com/users/Meligy/events{/privacy}","received_events_url":"https://api.github.com/users/Meligy/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-03-29T14:13:50Z","updated_at":"2016-04-21T10:00:52Z","closed_at":null,"body":"In the [`ngForm` directive documentation][doc], the page says that the directive can be used as an attribute `ngForm` (selector `[ngForm]`) and as a `<form>` element.\r\n\r\n[doc]: https://angular.io/docs/ts/latest/api/common/NgForm-directive.html\r\n\r\nI tried to do that, and I failed to get it to work. I'm suspecting it's a bug.\r\n\r\n**Here's what I tried:**\r\n\r\n[Plunk](http://plnkr.co/edit/BKY6aVhteDhXSkuCFtO1?p=preview)\r\n*(Look for the `app/hello_world` component)*\r\n\r\nRelevant Component Template:\r\n\r\n``` html\r\n<div>Try to edit the text, tab out, \r\n  then press Enter or click a button:</div>\r\n\r\n<!-- \r\n  The #something=\"ngForm\" is inspired by the thread\r\n  https://github.com/angular/angular/issues/5997\r\n  It's unlikely to be related to the issue\r\n-->\r\n\r\n<h3>Broken</h3>\r\n<div ngForm #fBroken=\"ngForm\"\r\n  (submit)='log([\"broken\", \"submit\", newName, newTime])'\r\n  (ngSubmit)='log([\"broken\", \"ngSubmit\", newName, newTime])'>\r\n\r\n  <input type=\"text\" [(ngModel)]=\"newName\"\r\n    (change)='log([\"broken\", \"change (not [ng]Submit)\", newName, newTime])'\r\n    #nBroken=\"ngForm\"\r\n    ngControl=\"nBroken\"\r\n    placeholder=\"Enter a name here\">\r\n    \r\n  <input type=\"submit\" \r\n    #submitterBroken=\"ngForm\"\r\n    ngControl=\"submitterBroken\"\r\n    ngModel=\"'submit input'\">\r\n    \r\n  <button type=\"submit\">Submit button</button>\r\n</div>\r\n\r\n\r\n<h3>Working</h3>\r\n\r\n<form #fWorking=\"ngForm\"\r\n  (submit)='log([\"working\", \"submit\", newName, newTime])'\r\n  (ngSubmit)='log([\"working\", \"ngSubmit\", newName, newTime])'>\r\n\r\n  <input type=\"text\" [(ngModel)]=\"newName\"\r\n    (change)='log([\"working\", \"change (not [ng]Submit)\", newName, newTime])'\r\n    #nWorking=\"ngForm\"\r\n    ngControl=\"nWorking\"\r\n    placeholder=\"Enter a name here\">\r\n    \r\n  <input type=\"submit\" \r\n    #submitterWorking=\"ngForm\"\r\n    ngControl=\"submitterWorking\"\r\n    ngModel=\"'submit input'\">\r\n    \r\n  <button type=\"submit\">Submit button</button>\r\n</form>\r\n\r\n  <hr>\r\n  <!-- conditionally display `yourName` -->\r\n  <pre>{{result}}</pre>\r\n```\r\n\r\n(The extra `ngControl` stuff etc are just several things I tried to get the first conceptual form to work. I probably could remove them from the working sample but I kept them to show that they are not the reason the first sample is broken)\r\n\r\n**Version Information**\r\n\r\nThe plunker was created against Angular 2 beta 12, and tested on Chrome 51 for Mac.\r\n\r\n**Usage Scenario**\r\n\r\nWhy would I want a non `<form>` element as a form at all?\r\n\r\nA simple example is a table where each `<tr>` is a conceptual form.\r\n\r\nMaybe this can be worked around with a parent `<form>` element around the table, IF the `ngSubmit` will be triggered from the submit triggers in each `<tr ngForm>` row (either pressing Enter/Return on a text input, or clicking a submit button), not from the outer table `<form>` itself (so that the event can be handled and prevented from propagation by the event handler in the row component).\r\n\r\nBut this stuff worked pretty well in Angular 1.x, and while I understand that this is a rewrite, it would be nice not to lose this when migrating to Angular 2.\r\n\r\nThanks for the awesome libraries by the way :)\r\n\r\n**Update**\r\n\r\nI added the working version just to show the difference when creating this issue. The broken version was still broken without it, so, the usage of the same variable for `ngModel` is not changing the results of the broken one (all the control identifiers are unique though, and again, the same behaviour happens if you delete the working version and only look at the broken one)."},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/212840403","html_url":"https://github.com/angular/angular/issues/7807#issuecomment-212840403","issue_url":"https://api.github.com/repos/angular/angular/issues/7807","id":212840403,"user":{"login":"Meligy","id":171637,"avatar_url":"https://avatars.githubusercontent.com/u/171637?v=3","gravatar_id":"","url":"https://api.github.com/users/Meligy","html_url":"https://github.com/Meligy","followers_url":"https://api.github.com/users/Meligy/followers","following_url":"https://api.github.com/users/Meligy/following{/other_user}","gists_url":"https://api.github.com/users/Meligy/gists{/gist_id}","starred_url":"https://api.github.com/users/Meligy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Meligy/subscriptions","organizations_url":"https://api.github.com/users/Meligy/orgs","repos_url":"https://api.github.com/users/Meligy/repos","events_url":"https://api.github.com/users/Meligy/events{/privacy}","received_events_url":"https://api.github.com/users/Meligy/received_events","type":"User","site_admin":false},"created_at":"2016-04-21T10:00:52Z","updated_at":"2016-04-21T10:00:52Z","body":"@KillerCodeMonkey I don't think your problem is related to this issue. It could be related to how events are run async (so your `ngSubmit` handler is likely called async itself).\r\n\r\nThere is a [good post](http://www.bennadel.com/blog/3071-synchronous-vs-asynchronous-eventemitters-in-angular-2-beta-14.htm) about this behaviour in your own components but it also affects builtin directives.\r\n\r\nThe Angular team is changing this behaviour from async to sync soon, but it hasn't happened yet. IT's tracked in https://github.com/angular/angular/pull/7421.\r\n\r\nI'm not sure if that explains why the `submit` one works though. Maybe it works differently for some reason as well, which could be related to this issue."}}