<ul class="contains-task-list">
<li><strong>I'm submitting a ...</strong></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> feature request</li>
</ul>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">(ngSubmit)="onSubmit()" do not trigger when used with <code class="notranslate">[form]</code> directives.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;table&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;!-- PARTICULARS LIST WILL BE POPULATED HERE --&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tbody&gt;
                  &lt;tr form [ngFormModel]=&quot;particularForm&quot; (ngSubmit)=&quot;addParticular()&quot;&gt;

                    &lt;td class=&quot;form-group&quot;&gt;
                      &lt;input ngControl=&quot;item&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Item&quot;&gt;
                    &lt;/td&gt;
                    &lt;td class=&quot;form-group&quot;&gt;
                      &lt;input ngControl=&quot;unit&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Unit&quot;&gt;
                    &lt;/td&gt;
                    &lt;td class=&quot;form-group&quot;&gt;
                      &lt;input ngControl=&quot;quantity&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Quantity&quot;&gt;
                    &lt;/td&gt;
                    &lt;td class=&quot;form-group&quot;&gt;
                      &lt;input ngControl=&quot;price&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Price&quot;&gt;
                    &lt;/td&gt;
                    &lt;td class=&quot;form-group&quot;&gt;
                      &lt;input ngControl=&quot;remarks&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Remarks&quot;&gt;
                    &lt;/td&gt;
                    &lt;td&gt;
                      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt; Add &lt;/button&gt;

                    &lt;/td&gt;

                  &lt;/tr&gt;
              &lt;/tbody&gt;
&lt;/table&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">table</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">tbody</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">tr</span><span class="pl-kos">&gt;</span>
<span class="pl-c">&lt;!-- PARTICULARS LIST WILL BE POPULATED HERE --&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">tr</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">tbody</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">tbody</span><span class="pl-kos">&gt;</span>
                  <span class="pl-kos">&lt;</span><span class="pl-ent">tr</span> <span class="pl-c1">form</span> <span class="pl-c1">[ngFormModel]</span>="<span class="pl-s">particularForm</span>" <span class="pl-c1">(ngSubmit)</span>="<span class="pl-s">addParticular()</span>"<span class="pl-kos">&gt;</span>

                    <span class="pl-kos">&lt;</span><span class="pl-ent">td</span> <span class="pl-c1">class</span>="<span class="pl-s">form-group</span>"<span class="pl-kos">&gt;</span>
                      <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">ngControl</span>="<span class="pl-s">item</span>" <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">class</span>="<span class="pl-s">form-control</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">Item</span>"<span class="pl-kos">&gt;</span>
                    <span class="pl-kos">&lt;/</span><span class="pl-ent">td</span><span class="pl-kos">&gt;</span>
                    <span class="pl-kos">&lt;</span><span class="pl-ent">td</span> <span class="pl-c1">class</span>="<span class="pl-s">form-group</span>"<span class="pl-kos">&gt;</span>
                      <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">ngControl</span>="<span class="pl-s">unit</span>" <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">class</span>="<span class="pl-s">form-control</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">Unit</span>"<span class="pl-kos">&gt;</span>
                    <span class="pl-kos">&lt;/</span><span class="pl-ent">td</span><span class="pl-kos">&gt;</span>
                    <span class="pl-kos">&lt;</span><span class="pl-ent">td</span> <span class="pl-c1">class</span>="<span class="pl-s">form-group</span>"<span class="pl-kos">&gt;</span>
                      <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">ngControl</span>="<span class="pl-s">quantity</span>" <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">class</span>="<span class="pl-s">form-control</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">Quantity</span>"<span class="pl-kos">&gt;</span>
                    <span class="pl-kos">&lt;/</span><span class="pl-ent">td</span><span class="pl-kos">&gt;</span>
                    <span class="pl-kos">&lt;</span><span class="pl-ent">td</span> <span class="pl-c1">class</span>="<span class="pl-s">form-group</span>"<span class="pl-kos">&gt;</span>
                      <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">ngControl</span>="<span class="pl-s">price</span>" <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">class</span>="<span class="pl-s">form-control</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">Price</span>"<span class="pl-kos">&gt;</span>
                    <span class="pl-kos">&lt;/</span><span class="pl-ent">td</span><span class="pl-kos">&gt;</span>
                    <span class="pl-kos">&lt;</span><span class="pl-ent">td</span> <span class="pl-c1">class</span>="<span class="pl-s">form-group</span>"<span class="pl-kos">&gt;</span>
                      <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">ngControl</span>="<span class="pl-s">remarks</span>" <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">class</span>="<span class="pl-s">form-control</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">Remarks</span>"<span class="pl-kos">&gt;</span>
                    <span class="pl-kos">&lt;/</span><span class="pl-ent">td</span><span class="pl-kos">&gt;</span>
                    <span class="pl-kos">&lt;</span><span class="pl-ent">td</span><span class="pl-kos">&gt;</span>
                      <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">type</span>="<span class="pl-s">submit</span>" <span class="pl-c1">class</span>="<span class="pl-s">btn btn-primary</span>"<span class="pl-kos">&gt;</span> Add <span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>

                    <span class="pl-kos">&lt;/</span><span class="pl-ent">td</span><span class="pl-kos">&gt;</span>

                  <span class="pl-kos">&lt;/</span><span class="pl-ent">tr</span><span class="pl-kos">&gt;</span>
              <span class="pl-kos">&lt;/</span><span class="pl-ent">tbody</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">table</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
It would be nice to have native support for (ngSubmit) for <code class="notranslate">[form]</code> directives also like <code class="notranslate">&lt;form&gt;</code> elements have currently.</p>
<ul dir="auto">
<li><strong>What is the motivation / use case for changing the behavior?</strong><br>
I've <code class="notranslate">paritculars</code> ControlArray which contains <code class="notranslate">ControlGroup</code> with fields item, unit, quantity... .<br>
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.</li>
<li><strong>Please tell us about your environment:</strong></li>
<li><strong>Angular version:</strong> 2.0.0-rc.1</li>
<li><strong>Browser:</strong> All Browsers</li>
<li><strong>Language:</strong> TypeScript 1.8</li>
</ul>
<p dir="auto">In the <a href="https://angular.io/docs/ts/latest/api/common/NgForm-directive.html" rel="nofollow"><code class="notranslate">ngForm</code> directive documentation</a>, the page says that the directive can be used as an attribute <code class="notranslate">ngForm</code> (selector <code class="notranslate">[ngForm]</code>) and as a <code class="notranslate">&lt;form&gt;</code> element.</p>
<p dir="auto">I tried to do that, and I failed to get it to work. I'm suspecting it's a bug.</p>
<p dir="auto"><strong>Here's what I tried:</strong></p>
<p dir="auto"><a href="http://plnkr.co/edit/BKY6aVhteDhXSkuCFtO1?p=preview" rel="nofollow">Plunk</a><br>
<em>(Look for the <code class="notranslate">app/hello_world</code> component)</em></p>
<p dir="auto">Relevant Component Template:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div&gt;Try to edit the text, tab out, 
  then press Enter or click a button:&lt;/div&gt;

&lt;!-- 
  The #something=&quot;ngForm&quot; is inspired by the thread
  https://github.com/angular/angular/issues/5997
  It's unlikely to be related to the issue
--&gt;

&lt;h3&gt;Broken&lt;/h3&gt;
&lt;div ngForm #fBroken=&quot;ngForm&quot;
  (submit)='log([&quot;broken&quot;, &quot;submit&quot;, newName, newTime])'
  (ngSubmit)='log([&quot;broken&quot;, &quot;ngSubmit&quot;, newName, newTime])'&gt;

  &lt;input type=&quot;text&quot; [(ngModel)]=&quot;newName&quot;
    (change)='log([&quot;broken&quot;, &quot;change (not [ng]Submit)&quot;, newName, newTime])'
    #nBroken=&quot;ngForm&quot;
    ngControl=&quot;nBroken&quot;
    placeholder=&quot;Enter a name here&quot;&gt;

  &lt;input type=&quot;submit&quot; 
    #submitterBroken=&quot;ngForm&quot;
    ngControl=&quot;submitterBroken&quot;
    ngModel=&quot;'submit input'&quot;&gt;

  &lt;button type=&quot;submit&quot;&gt;Submit button&lt;/button&gt;
&lt;/div&gt;


&lt;h3&gt;Working&lt;/h3&gt;

&lt;form #fWorking=&quot;ngForm&quot;
  (submit)='log([&quot;working&quot;, &quot;submit&quot;, newName, newTime])'
  (ngSubmit)='log([&quot;working&quot;, &quot;ngSubmit&quot;, newName, newTime])'&gt;

  &lt;input type=&quot;text&quot; [(ngModel)]=&quot;newName&quot;
    (change)='log([&quot;working&quot;, &quot;change (not [ng]Submit)&quot;, newName, newTime])'
    #nWorking=&quot;ngForm&quot;
    ngControl=&quot;nWorking&quot;
    placeholder=&quot;Enter a name here&quot;&gt;

  &lt;input type=&quot;submit&quot; 
    #submitterWorking=&quot;ngForm&quot;
    ngControl=&quot;submitterWorking&quot;
    ngModel=&quot;'submit input'&quot;&gt;

  &lt;button type=&quot;submit&quot;&gt;Submit button&lt;/button&gt;
&lt;/form&gt;

  &lt;hr&gt;
  &lt;!-- conditionally display `yourName` --&gt;
  &lt;pre&gt;{{result}}&lt;/pre&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>Try to edit the text, tab out, 
  then press Enter or click a button:<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>

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

<span class="pl-kos">&lt;</span><span class="pl-ent">h3</span><span class="pl-kos">&gt;</span>Broken<span class="pl-kos">&lt;/</span><span class="pl-ent">h3</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">ngForm</span> <span class="pl-c1">#fBroken</span>="<span class="pl-s">ngForm</span>"
  <span class="pl-c1">(submit)</span>='<span class="pl-s">log(["broken", "submit", newName, newTime])</span>'
  <span class="pl-c1">(ngSubmit)</span>='<span class="pl-s">log(["broken", "ngSubmit", newName, newTime])</span>'<span class="pl-kos">&gt;</span>

  <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">[(ngModel)]</span>="<span class="pl-s">newName</span>"
    <span class="pl-c1">(change)</span>='<span class="pl-s">log(["broken", "change (not [ng]Submit)", newName, newTime])</span>'
    <span class="pl-c1">#nBroken</span>="<span class="pl-s">ngForm</span>"
    <span class="pl-c1">ngControl</span>="<span class="pl-s">nBroken</span>"
    <span class="pl-c1">placeholder</span>="<span class="pl-s">Enter a name here</span>"<span class="pl-kos">&gt;</span>

  <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">submit</span>" 
    <span class="pl-c1">#submitterBroken</span>="<span class="pl-s">ngForm</span>"
    <span class="pl-c1">ngControl</span>="<span class="pl-s">submitterBroken</span>"
    <span class="pl-c1">ngModel</span>="<span class="pl-s">'submit input'</span>"<span class="pl-kos">&gt;</span>

  <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">type</span>="<span class="pl-s">submit</span>"<span class="pl-kos">&gt;</span>Submit button<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>


<span class="pl-kos">&lt;</span><span class="pl-ent">h3</span><span class="pl-kos">&gt;</span>Working<span class="pl-kos">&lt;/</span><span class="pl-ent">h3</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">form</span> <span class="pl-c1">#fWorking</span>="<span class="pl-s">ngForm</span>"
  <span class="pl-c1">(submit)</span>='<span class="pl-s">log(["working", "submit", newName, newTime])</span>'
  <span class="pl-c1">(ngSubmit)</span>='<span class="pl-s">log(["working", "ngSubmit", newName, newTime])</span>'<span class="pl-kos">&gt;</span>

  <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">[(ngModel)]</span>="<span class="pl-s">newName</span>"
    <span class="pl-c1">(change)</span>='<span class="pl-s">log(["working", "change (not [ng]Submit)", newName, newTime])</span>'
    <span class="pl-c1">#nWorking</span>="<span class="pl-s">ngForm</span>"
    <span class="pl-c1">ngControl</span>="<span class="pl-s">nWorking</span>"
    <span class="pl-c1">placeholder</span>="<span class="pl-s">Enter a name here</span>"<span class="pl-kos">&gt;</span>

  <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">submit</span>" 
    <span class="pl-c1">#submitterWorking</span>="<span class="pl-s">ngForm</span>"
    <span class="pl-c1">ngControl</span>="<span class="pl-s">submitterWorking</span>"
    <span class="pl-c1">ngModel</span>="<span class="pl-s">'submit input'</span>"<span class="pl-kos">&gt;</span>

  <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">type</span>="<span class="pl-s">submit</span>"<span class="pl-kos">&gt;</span>Submit button<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">form</span><span class="pl-kos">&gt;</span>

  <span class="pl-kos">&lt;</span><span class="pl-ent">hr</span><span class="pl-kos">&gt;</span>
  <span class="pl-c">&lt;!-- conditionally display `yourName` --&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">pre</span><span class="pl-kos">&gt;</span>{{result}}<span class="pl-kos">&lt;/</span><span class="pl-ent">pre</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">(The extra <code class="notranslate">ngControl</code> 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)</p>
<p dir="auto"><strong>Version Information</strong></p>
<p dir="auto">The plunker was created against Angular 2 beta 12, and tested on Chrome 51 for Mac.</p>
<p dir="auto"><strong>Usage Scenario</strong></p>
<p dir="auto">Why would I want a non <code class="notranslate">&lt;form&gt;</code> element as a form at all?</p>
<p dir="auto">A simple example is a table where each <code class="notranslate">&lt;tr&gt;</code> is a conceptual form.</p>
<p dir="auto">Maybe this can be worked around with a parent <code class="notranslate">&lt;form&gt;</code> element around the table, IF the <code class="notranslate">ngSubmit</code> will be triggered from the submit triggers in each <code class="notranslate">&lt;tr ngForm&gt;</code> row (either pressing Enter/Return on a text input, or clicking a submit button), not from the outer table <code class="notranslate">&lt;form&gt;</code> itself (so that the event can be handled and prevented from propagation by the event handler in the row component).</p>
<p dir="auto">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.</p>
<p dir="auto">Thanks for the awesome libraries by the way :)</p>
<p dir="auto"><strong>Update</strong></p>
<p dir="auto">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 <code class="notranslate">ngModel</code> 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).</p>