title: Value appears in all dynamic input fields
body: <p>I have a form that contains dynamic input fields. So there is a button and when I press that button, a new input field will be created.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]=&quot;userProfile&quot; &gt;
      &lt;div *ngFor=&quot;let field of fields&quot;&gt;
          &lt;input id=&quot;username&quot; formControlName=&quot;username&quot; type=&quot;text&quot; placeholder=&quot;Type something here...&quot;&gt;
  
      &lt;/div&gt;
      &lt;button (click)=&quot;fields.push(fields.length)&quot;&gt;Add Field&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>this.userProfile =  this.fb.group({
    username: ['']
  });
  </code></pre>
  <p>As you see, <code>username</code> has no default value but my problem is: When I enter a text in this input field and then press the button to create a new input field, the previously entered value also appears for the newly created input field.</p>
  <p>I know that I can write a function that removes the value for the newly created field but this is more like a hack to me. So I am looking for a cleaner way.</p>
  <p>Test it on <a href="https://stackblitz.com/edit/angular-formbuilder-8akxsa?file=src/app/app.component.ts" rel="nofollow noreferrer">StackBlitz</a>.</p>