时间戳

首页 > 解决方案 > 使用 Angular 9 中的 Keyup 将输入值传递给另一个输入

javascript - 使用 Angular 9 中的 Keyup 将输入值传递给另一个输入

问题描述

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

组件.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
图片SS

标签： javascripthtmlangularjsangularangular9

解决方案

对于反应形式尝试使用。并且需要将 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 的任何值

推荐阅读