在 angular 9 中使用 Keyup 将输入值传递给另一个输入

Question

如何将一个输入字段的数据立即传递到另一个输入字段？这不能正常工作。我该如何解决这个问题？

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);
 })
  } 
 }

更新代码

  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: 面额形式

<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>

这是我的面额表。我想在第一个输入字段中显示任何用户输入的结果并将其显示到第二个输入字段

图片SS

Answer 1

您可以使用 two-way 与 ngModel 绑定。尝试以下

控制器

inputNum: number;
...

模板

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

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

工作示例：Stackblitz

Answer 2

对于反应形式尝试使用。并且需要将 formControlName 添加到您的 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);
}

我猜似乎更好的方法是不创建 onKeyUp()，而是使用订阅您表单的 valueChanges

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

工作示例

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 始终显示 input1 的任何值

在 angular 9 中使用 Keyup 将输入值传递给另一个输入

Passing input value to another input using Keyup in angular 9

html

javascript

angularjs

angular

angular9