title: Passing input value to another input using Keyup in angular 9
body: <p>How can I pass one input field data to another input field instantly?
  This is not working fine. How can I solve this problem?</p>
  <p><strong>Component.ts</strong></p>
  <pre><code>export class AppComponent  {
   number = ''; //initialised the text variable 
  
   ngOnInit(): void { 
   
   this.collFormMorning = this.fb.group({
    Cash: this.fb.control(null),
    Cash2: this.fb.control(null),
   });
  
   this.collFormMorning.get('Cash').valueChanges
   .subscribe(x =&gt; {
    console.log(x);
    this.collFormMorning.get('Cash2').setValue(x);
   })
    } 
   }
  </code></pre>
  <p><strong>Updated code</strong></p>
  <pre><code>  setTotalValue() {
  const data = this.collFormMorning.value;
  let sum = 0;
  Object.keys(data).map(key =&gt; {
    if (['Cash2', 'Card2', 'PhonePay2', 'Ecom2', 'Other2', 'Thousand2', 'FiveHundred2', 'Hundred2', 'FIfty2', 'Twenty2', 'Ten2', 'Five2', 'Two2', 'One2'].indexOf(key) !== -1 &amp;&amp; data[key]) {
      this.sum += data[key];
      console.log(sum);
    }
  });
  this.collFormMorning.get('Total2').setValue(sum);
  console.log(sum);
  };
   
   &lt;-- to get total sum --&gt;
   &lt;div class=&quot;input-group&quot;&gt;
    &lt;input type=&quot;text&quot; value=&quot;Total&quot; class=&quot;form-control&quot; readonly&gt;
    &lt;input type=&quot;number&quot; formControlName=&quot;Total2&quot; id=&quot;submitBtn&quot;
      class=&quot;form-control&quot; readonly&gt;
   &lt;/div&gt;
  
   
  </code></pre>
  <p><strong>Html:</strong> <em>Denomination Form</em></p>
  <pre><code>&lt;form [formGroup]=&quot;collFormMorning&quot; autocomplete=&quot;off&quot; (submit)=&quot;onSubmit()&quot;&gt;
  &lt;label class=&quot;label&quot;&gt;Morning&lt;/label&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot;&gt;Cash &lt;small class=&quot;mendatory&quot;&gt;*&lt;/small&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Cash&quot;  class=&quot;form-control&quot;  required&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Cash2&quot; class=&quot;form-control&quot;  readonly&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot;&gt;Card&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Card&quot; class=&quot;form-control&quot; id=&quot;card&quot;&gt;
      &lt;input type=&quot;&quot; formControlName=&quot;Card2&quot; class=&quot;form-control&quot; id=&quot;dcard&quot; readonly&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot;&gt;Phone Pay&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;PhonePay&quot; class=&quot;form-control&quot; id=&quot;phonePay&quot;&gt;
      &lt;input type=&quot;&quot; formControlName=&quot;PhonePay2&quot; class=&quot;form-control&quot; id=&quot;dphonePay&quot; readonly&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot;&gt;Ecommerce&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Ecom&quot; class=&quot;form-control&quot; id=&quot;ecom&quot;&gt;
      &lt;input type=&quot;&quot; formControlName=&quot;Ecom2&quot; class=&quot;form-control&quot; id=&quot;decom&quot; readonly&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot; id=&quot;&quot;&gt;1000X&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Thousand&quot; id=&quot;one&quot; class=&quot;form-control&quot;&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Thousand2&quot; id=&quot;done&quot; class=&quot;form-control&quot; readonly&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot; id=&quot;&quot;&gt;500X&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;FiveHundred&quot; id=&quot;two&quot; class=&quot;form-control&quot;&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;FiveHundred2&quot; id=&quot;dtwo&quot; readonly class=&quot;form-control&quot;&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot; id=&quot;&quot;&gt;100X&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Hundred&quot; id=&quot;three&quot; class=&quot;form-control&quot;&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Hundred2&quot; id=&quot;dthree&quot; readonly class=&quot;form-control&quot;&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot; id=&quot;&quot;&gt;50X&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Fifty&quot; id=&quot;four&quot; class=&quot;form-control&quot;&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Fifty2&quot; id=&quot;dfour&quot; readonly class=&quot;form-control&quot;&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot; id=&quot;&quot;&gt;20X&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Twenty&quot; id=&quot;five&quot; class=&quot;form-control&quot;&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Twenty2&quot; id=&quot;dfive&quot; readonly class=&quot;form-control&quot;&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot; id=&quot;&quot;&gt;10X&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Ten&quot; id=&quot;six&quot; class=&quot;form-control&quot;&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Ten2&quot; id=&quot;dsix&quot; readonly class=&quot;form-control&quot;&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot; id=&quot;&quot;&gt;5X&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Five&quot; id=&quot;seven&quot; class=&quot;form-control&quot;&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Five2&quot; id=&quot;dseven&quot; readonly class=&quot;form-control&quot;&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot; id=&quot;&quot;&gt;2X&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Two&quot; id=&quot;eight&quot; class=&quot;form-control&quot;&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Two2&quot; id=&quot;deight&quot; readonly class=&quot;form-control&quot;&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-prepend&quot;&gt;
          &lt;span class=&quot;input-group-text&quot; id=&quot;&quot;&gt;1X&lt;/span&gt;
      &lt;/div&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;One&quot; id=&quot;nine&quot; class=&quot;form-control&quot;&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;One2&quot; id=&quot;dnine&quot; readonly class=&quot;form-control&quot;&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div class=&quot;input-group&quot;&gt;
      &lt;input type=&quot;text&quot; value=&quot;Total&quot; class=&quot;form-control&quot; readonly&gt;
      &lt;input type=&quot;number&quot; formControlName=&quot;Total&quot; id=&quot;submitBtn&quot; class=&quot;form-control&quot;&gt;
  &lt;/div&gt;&lt;br&gt;
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-4&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;col-md-4&quot;&gt;&lt;br&gt;
          &lt;div type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-4&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p><em>this is my Denomination Form. I want to display result whatever user input in first input field and display it to second input field</em></p>
  <p>Picture SS<br />
  <img src="https://i.stack.imgur.com/TFNr1.png" alt="Picture SS" /></p>