同じAngular2コンポーネントに2つのフォームを持たせることができます

Question

私はAngular 2を初めて使用しており、1つのAngular 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> 

あなたは上記を参照した場合、私は同じコンポーネント内部の2つの形式があります。今ではそれぞれのフィールドに値を入力すると、JSONが適切に作成されているのがわかります...しかし、どちらかのフォームを送信すると、送信されたJSONは両方のフォームで同じように作成されます。これは、HTMLページには、Ajaxを一切含まないフォームが1つしか含まれていないことが原因です。誰でもこのことを私に説明してもらえますか？

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

Answer 1

期待通りに動作します。

あなたのフォームは、個々の値を持っていますが、同じ変数value

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

に結果を保存し、すなわち

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

、それを印刷していますあるフォームを提出しても他のフォームには影響しません。共通変数valueにのみ影響します。

処理を分離する必要がある場合は、異なる送信機能を使用してください。

同じ機能を使用する場合は、渡された値が異なる必要があります。

Answer 2

export class FormComponent { 

    value: any; 
    value1: any; 

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

はこれを試してみて、変更値は

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

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