Как связать данные в поле ввода с другим полем ввода в Angular?

Question

Я работаю над проектом Angular, и у меня есть два поля ввода, я хочу, чтобы значение, которое помещается в первое поле ввода (field1), отображалось на другом входе (field2), но умножалось на два. Как я go об этом? Как связать данные и умножить значение на 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>

Это мой файл TS после добавления [ngmodel] = input1 в текстовое поле

Answer 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 как

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

2.change функция как

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

}

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