时间戳

首页 > 解决方案 > 如何将输入字段中的数据绑定到 Angular 上的另一个输入字段？

javascript - 如何将输入字段中的数据绑定到 Angular 上的另一个输入字段？

问题描述

我正在处理一个 Angular 项目，我有两个输入字段，我希望放入第一个输入字段 (field1) 的值显示在另一个输入 (field2) 中，但乘以 2。我该怎么做？如何绑定数据并将值乘以 2 ？

例如，如果在第一个输入文本字段中输入 2，它应该在另一个输入字段中显示 4。


         <div class="field1">
         <label for="fieldinput1"><b>
           Amounts  </b>
          <span class="dpspan">*</span>
           </label><br/>
        <input name="fieldinput1" min="0.5" max="5000" placeholder="000" type="number" height="70px" 
          required>
        </div><br/>

        <div class="field2">
           <label for="fieldinput2"><b>
                Total Income Returns </b>
             <span class="Incspan">*</span>
                </label><br/>
         <input name="fieldinput2" readonly type="text" required>

这是我将 [ngmodel]=input1 添加到文本字段后的 TS 文件在此处输入图像描述

标签： javascripthtmlangularforms

解决方案

    <div class="field1">
  <label for="fieldinput1"><b>
      Amounts </b>
    <span class="dpspan">*</span>
  </label><br />
  <input name="fieldinput1" [(ngModel)]="data.input1" (change)="changeSecondInput()" min="0.5" max="5000"
    placeholder="000" type="number" height="70px" required>
</div><br />

<div class="field2">
  <label for="fieldinput2"><b>
      Total Income Returns </b>
    <span class="Incspan">*</span>
  </label><br />
  <input name="fieldinput2" [(ngModel)]="data.input2" readonly type="text" required>
  </div>

和里面 ts

1.declare oblect like

public data={
input1:number,
input2:number
};

2.change函数如

changeSecondInput(){
this.data.input2=parseInt(this.data.input1)*2

}

推荐阅读