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

【问题标题】：How do I bind the data in an input field to another input field on Angular?如何将输入字段中的数据绑定到 Angular 上的另一个输入字段？
【发布时间】：2020-05-15 04:02:15
【问题描述】：

我正在处理一个 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 文件

【问题讨论】：

如果您在第二个输入字段中添加一些内容，您是否希望第一个也更改？
@IraklisGkougkousis 第二个输入字段有一个只读选项，所以它只是我在第一个字段中显示的内容，以显示在第二个输入字段中，但值乘以 2
这是为angular 或angularjs（或只是普通的javascript）？非常不同的情况。
@IraklisGkougkousis 它是 angularjs (7)
将 getChange 函数中的 input2 更改为 $event

标签： javascript html angular forms

【解决方案1】：

    <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

}

【讨论】：

它不起作用，它说数字是一种类型但用作值

【解决方案2】：

 <div class="field1">
 <label for="fieldinput1"><b>
   Amounts  </b>
  <span class="dpspan">*</span>
   </label><br/>
<input name="fieldinput1" [ngModel]="input1" (ngModelChange)="getChange($event)" 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]="input2" readonly type="text" required>

在你的 ts 文件中

  input1;
  input2;
  getChange(event){
   this.input2=event*2
  }

这里是另一个例子

import { Component, OnChanges, DoCheck } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <input [ngModel]="name" (ngModelChange)="getChange($event)" placeholder="type here" type="text">
    <input [ngModel]="input2" readOnly>
  `
})
export class AppComponent    {
  name=2;
  input2=this.name*2;

  getChange(event){
    this.input2=parseInt(event)*2
  }
}

【讨论】：

它在 src/app/investmentplan/investmentplan.component.ts(18,16) 中抛出错误 ERROR：错误 TS2663：找不到名称 'input1'。您是说实例成员“this.input1”吗？
只需在你的 ts 文件中声明 input1
检查我的浏览器显示此错误无法绑定到“ngModel”，因为它不是“输入”的已知属性
如果你想使用 ngModel 你需要在你的模块中导入 FormsModule
尝试在您的 app.module.ts 中导入 FormsModule