我们可以在同一个Angular2组件中有2个表单

Question

我是Angular 2的新手，想知道我们可以在单个角度2组件中有2个形式。下面是我的form.component.html的样子。

<div>
 <span>Forms Using ngModel Directive</span>
  <form #form="ngForm" (ngSubmit)="submit(form.value)">
  <div>
    <label>Firstname:</label>
    <input type="text" name="firstname" ngModel>
  </div>
  <div>
    <label>Lastname:</label>
    <input type="text" name="lastname" ngModel>
  </div>
  <div>
    <label>Street:</label>
    <input type="text" name="street" ngModel>
  </div>
  <div>
    <label>Zip:</label>
    <input type="text" name="zip" ngModel>
  </div>
  <div>
    <label>City:</label>
    <input type="text" name="city" ngModel>
  </div>

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

<pre>
 {{form.value | json}}
</pre>

<h4>Submitted</h4>
<pre>    
 {{value | json }}
</pre>

<span>Same Form using ngModelGroup & ngModel Directive(Notice Difference      in the JSon)</span>
  <form #form1="ngForm" (ngSubmit)="submit(form1.value)">
  <div ngModelGroup="name">
    <label>Firstname:</label>
    <input type="text" name="firstname1" ngModel>
    <label>Lastname:</label>
    <input type="text" name="lastname1" ngModel>
  </div>
  <div ngModelGroup="address">
    <label>Street:</label>
    <input type="text" name="street1" ngModel>

    <label>Zip:</label>
    <input type="text" name="zip1" ngModel>

    <label>City:</label>
    <input type="text" name="city1" ngModel>
  </div>

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

<pre>
 {{form1.value | json}}
</pre>

<h4>Submitted</h4>
<pre>    
  {{value | json }}
</pre>

如果你看到上面我在同一个组件中有两个表单。现在，当我在相应的字段中输入值时，我可以看到JSON正在被适当地创建...但是当我提交任何一个表单时，提交的JSON以相同的方式创建，即使另一个表单可能为空。这是因为HTML页面只能包含一个表单而不涉及任何类型的ajax。任何人都可以向我解释这个....下面是一个关于plunk的链接。

https://plnkr.co/edit/ZoCOzlCNa82ugbYiXyjK?p=preview

Answer 1

它按预期工作。

您的表单具有单独的值，但您将结果保存到相同的变量value

submit(form) {
  this.value = form; 
}

并打印出来

<pre>    
  {{value | json }}
</pre>

即提交一份表格不会影响另一份。它只影响常见变量value。

如果需要单独处理，则使用不同的提交功能。

如果要使用相同的功能，则需要使传递的值不同。