Passing input value to another input using Keyup in angular 9

Question

How can I pass one input field data to another input field instantly? This is not working fine. How can I solve this problem?

Component.ts

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 => {
  console.log(x);
  this.collFormMorning.get('Cash2').setValue(x);
 })
  } 
 }

Updated code

  setTotalValue() {
const data = this.collFormMorning.value;
let sum = 0;
Object.keys(data).map(key => {
  if (['Cash2', 'Card2', 'PhonePay2', 'Ecom2', 'Other2', 'Thousand2', 'FiveHundred2', 'Hundred2', 'FIfty2', 'Twenty2', 'Ten2', 'Five2', 'Two2', 'One2'].indexOf(key) !== -1 && data[key]) {
    this.sum += data[key];
    console.log(sum);
  }
});
this.collFormMorning.get('Total2').setValue(sum);
console.log(sum);
};
 
 <-- to get total sum -->
 <div class="input-group">
  <input type="text" value="Total" class="form-control" readonly>
  <input type="number" formControlName="Total2" id="submitBtn"
    class="form-control" readonly>
 </div>

 

Html: Denomination Form

<form [formGroup]="collFormMorning" autocomplete="off" (submit)="onSubmit()">
<label class="label">Morning</label>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">Cash <small class="mendatory">*</small></span>
    </div>
    <input type="number" formControlName="Cash"  class="form-control"  required>
    <input type="number" formControlName="Cash2" class="form-control"  readonly>
</div><br>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">Card</span>
    </div>
    <input type="number" formControlName="Card" class="form-control" id="card">
    <input type="" formControlName="Card2" class="form-control" id="dcard" readonly>
</div>
<br>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">Phone Pay</span>
    </div>
    <input type="number" formControlName="PhonePay" class="form-control" id="phonePay">
    <input type="" formControlName="PhonePay2" class="form-control" id="dphonePay" readonly>
</div>
<br>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">Ecommerce</span>
    </div>
    <input type="number" formControlName="Ecom" class="form-control" id="ecom">
    <input type="" formControlName="Ecom2" class="form-control" id="decom" readonly>
</div>
<br>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="">1000X</span>
    </div>
    <input type="number" formControlName="Thousand" id="one" class="form-control">
    <input type="number" formControlName="Thousand2" id="done" class="form-control" readonly>
</div><br>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="">500X</span>
    </div>
    <input type="number" formControlName="FiveHundred" id="two" class="form-control">
    <input type="number" formControlName="FiveHundred2" id="dtwo" readonly class="form-control">
</div><br>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="">100X</span>
    </div>
    <input type="number" formControlName="Hundred" id="three" class="form-control">
    <input type="number" formControlName="Hundred2" id="dthree" readonly class="form-control">
</div><br>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="">50X</span>
    </div>
    <input type="number" formControlName="Fifty" id="four" class="form-control">
    <input type="number" formControlName="Fifty2" id="dfour" readonly class="form-control">
</div><br>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="">20X</span>
    </div>
    <input type="number" formControlName="Twenty" id="five" class="form-control">
    <input type="number" formControlName="Twenty2" id="dfive" readonly class="form-control">
</div><br>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="">10X</span>
    </div>
    <input type="number" formControlName="Ten" id="six" class="form-control">
    <input type="number" formControlName="Ten2" id="dsix" readonly class="form-control">
</div><br>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="">5X</span>
    </div>
    <input type="number" formControlName="Five" id="seven" class="form-control">
    <input type="number" formControlName="Five2" id="dseven" readonly class="form-control">
</div><br>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="">2X</span>
    </div>
    <input type="number" formControlName="Two" id="eight" class="form-control">
    <input type="number" formControlName="Two2" id="deight" readonly class="form-control">
</div><br>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="">1X</span>
    </div>
    <input type="number" formControlName="One" id="nine" class="form-control">
    <input type="number" formControlName="One2" id="dnine" readonly class="form-control">
</div><br>
<div class="input-group">
    <input type="text" value="Total" class="form-control" readonly>
    <input type="number" formControlName="Total" id="submitBtn" class="form-control">
</div><br>
<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"><br>
        <div type="submit" class="btn btn-primary">Submit</div>
    </div>
    <div class="col-md-4"></div>
  </div>
</form>

this is my Denomination Form. I want to display result whatever user input in first input field and display it to second input field

Picture SS

Answer 1

For reactive form try to use. And need to add formControlName to your input/s.

<input class="input-group" (keyup)="onKeyUp($event)">

<input [formControlName]="your control name" .../>

onKeyUp(x) {
  this.profileForm.get('your control name').setValue(x.target.value);
} 

Guess seems better way not create onKeyUp(), and use subscribe to valueChanges of your form

this.profileForm.get("you keyUp input formControlName").valueChanges.subscribe(x => {
this.profileForm.get('your control name').setValue(x);
});

working example

app.component.html
<form [formGroup]="form">
  <input type="text" formControlName="input1">
  <input type="text" formControlName="input2">
</form>

app.component.ts
export class AppComponent implements OnInit {
  form: FormGroup;
  constructor(
    private fb: FormBuilder
  ) {

  }

  ngOnInit() {
    this.form = this.fb.group({
      input1: this.fb.control(null),
      input2: this.fb.control(null),
      .....
      totalValue: this.fb.control(0)
    });

    this.form.get('input1').valueChanges
    .subscribe(x => {
      this.form.get('input2').setValue(x);
      this.setTotalValue();
    })
  }
}

setTotalValue() {
    const data = this.form.value;
    let summ = 0;
    Object.keys(data).map(key => { 
        if(['Cash2', 'Card2', 'PhonePay2' and other].indexOf(key) !== -1 && data[key]) { 
            this.summ += data[key]; 
            } 
        });
       this.form.get('totalValue').setValue(summ);
    });
}

input2 always display any value from input1

Answer 2

You could use two-way binding with ngModel . Try the following

Controller

inputNum: number;
...

Template

<input class="input-group" [(ngModel)]="inputNum" (keyup)="onKeyUp($event)">

<input class="input-group" [(ngModel)]="inputNum">

Working example: Stackblitz