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

对于反应形式尝试使用。并且需要将 formControlName 添加到您的输入中。

<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 的任何值

Answer 2

您可以对ngModel 使用双向绑定。试试下面的

控制器

inputNum: number;
...

模板

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

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

工作示例：Stackblitz