Issue 1:
I'm submitting a ...

feature request

Current behavior

(ngSubmit)="onSubmit()" do not trigger when used with [form] directives.

<table>
<tbody>
<tr>
<!-- PARTICULARS LIST WILL BE POPULATED HERE -->
</tr>
</tbody>
<tbody>
<tr form [ngFormModel]="particularForm" (ngSubmit)="addParticular()">

<td class="form-group">
<input ngControl="item" type="text" class="form-control" placeholder="Item">
</td>
<td class="form-group">
<input ngControl="unit" type="text" class="form-control" placeholder="Unit">
</td>
<td class="form-group">
<input ngControl="quantity" type="text" class="form-control" placeholder="Quantity">
</td>
<td class="form-group">
<input ngControl="price" type="text" class="form-control" placeholder="Price">
</td>
<td class="form-group">
<input ngControl="remarks" type="text" class="form-control" placeholder="Remarks">
</td>
<td>
<button type="submit" class="btn btn-primary"> Add </button>

</td>

</tr>
</tbody>
</table>

Expected/desired behavior

It would be nice to have native support for (ngSubmit) for [form] directives also like <form> elements have currently.

What is the motivation / use case for changing the behavior?

I've paritculars ControlArray which contains ControlGroup with fields item, unit, quantity... .

I was building an interface where user will enter some values and upon submitting the from it will be instantly displyed in tabular view above the form. Something like grid but not actually grid. Thats the use case.

Please tell us about your environment:

Angular version: 2.0.0-rc.1

Browser: All Browsers

Language: TypeScript 1.8

Issue 2:
In the ngForm directive documentation, the page says that the directive can be used as an attribute ngForm (selector [ngForm]) and as a <form> element.

I tried to do that, and I failed to get it to work. I'm suspecting it's a bug.

Here's what I tried:

Plunk

(Look for the app/hello_world component)

Relevant Component Template:

<div>Try to edit the text, tab out,
then press Enter or click a button:</div>

<!--
The #something="ngForm" is inspired by the thread
https://github.com/angular/angular/issues/5997
It's unlikely to be related to the issue
-->

<h3>Broken</h3>
<div ngForm #fBroken="ngForm"
(submit)='log(["broken", "submit", newName, newTime])'
(ngSubmit)='log(["broken", "ngSubmit", newName, newTime])'>

<input type="text" [(ngModel)]="newName"
(change)='log(["broken", "change (not [ng]Submit)", newName, newTime])'
#nBroken="ngForm"
ngControl="nBroken"
placeholder="Enter a name here">

<input type="submit"
#submitterBroken="ngForm"
ngControl="submitterBroken"
ngModel="'submit input'">

<button type="submit">Submit button</button>
</div>

<h3>Working</h3>

<form #fWorking="ngForm"
(submit)='log(["working", "submit", newName, newTime])'
(ngSubmit)='log(["working", "ngSubmit", newName, newTime])'>

<input type="text" [(ngModel)]="newName"
(change)='log(["working", "change (not [ng]Submit)", newName, newTime])'
#nWorking="ngForm"
ngControl="nWorking"
placeholder="Enter a name here">

<input type="submit"
#submitterWorking="ngForm"
ngControl="submitterWorking"
ngModel="'submit input'">

<button type="submit">Submit button</button>
</form>

<hr>
<!-- conditionally display `yourName` -->
<pre>{{result}}</pre>

(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)

Version Information

The plunker was created against Angular 2 beta 12, and tested on Chrome 51 for Mac.

Usage Scenario

Why would I want a non <form> element as a form at all?

A simple example is a table where each <tr> is a conceptual form.

Maybe 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).

But 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.

Thanks for the awesome libraries by the way :)

Update

I 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).