title: To edit the values of dynamically added input fields
body: <p><strong>SCENARIO :</strong> </p>
  
  <ul>
  <li>I have an component called <code>demo</code> which is  having  dropdown for <code>Employee type</code> and an input field for <code>Employee Id</code>. </li>
  <li>After clicking <strong>+</strong> Icon i am adding these two fields <code>(i,e Employee Type &amp; Id)</code> dynamically as shown below:</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/ucJBn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ucJBn.png" alt="enter image description here"></a></p>
  
  <ul>
  <li>I am able <strong>add</strong> &amp; <strong>delete</strong> these dynamically added values<code>(i,e Employee Type &amp; Id)</code>.Means on clicking <strong>cancel icon ( X )</strong> i am able to <strong>delete</strong> the added values.</li>
  </ul>
  
  <p><strong>EXPECTED RESULT :</strong> </p>
  
  <blockquote>
    <p>I want to edit the added values (i,e EMployee Type &amp; Id)` on clicking Edit ( i,e pen icon)</p>
  </blockquote>
  
  <p>Means on clicking <code>pen icon</code> again i should return back to the field to edit the values as shwown below:</p>
  
  <p><a href="https://i.stack.imgur.com/px3Ii.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/px3Ii.jpg" alt="enter image description here"></a></p>
  
  <p>Stackblitz <strong><a href="https://stackblitz.com/edit/angular-material2-issue-ccv3yk?file=app/demo/demo.component.ts" rel="nofollow noreferrer">DEMO</a></strong></p>