input value change based on a input value-CodePudding

I try different methods, but I can't really figure it out how can I solve this. So, I want to type a number to a input, and multiply that number, and displaying on another input.

Html file:

<div >
    <div >
        <label>Work fee net</label>
        <input type="text" >
    </div>
    <div >
        <label>Work fee gross</label>
        <input type="text"  disabled (change)="getGrossFee($event)" >
    </div>
</div>

Ts file:

   export class CalculatorComponent implements OnInit {
   workNetFee: number=0;
   workGrossFee : number =0;


  
  constructor() { }

  ngOnInit(): void {
  }

  getGrossFee(val){
 this.workGrossFee = val
 return val = this.workNetFee * 1.27;
  }

}

I know it's a basic question, but I try to improve my angular knowledge. Thanks for the helps!

CodePudding user response：

You need to listen to changes to the first input, so you can update workGrossFee and display it on the second input with [ngModel]="workGrossFee"

<div >
    <div >
        <label>Work fee net</label>
        <input type="text"  (change)="getGrossFee($event)">
    </div>
    <div >
        <label>Work fee gross</label>
        <input type="text"  [ngModel]="workGrossFee" disabled>
    </div>
</div>

export class CalculatorComponent implements OnInit {
   workNetFee: number=0;
   workGrossFee : number =0;

  
  constructor() { }

  ngOnInit(): void {
  }

  getGrossFee(val){
    this.workGrossFee = val * 1.27;
  }

}

CodePudding user response：

at app.module.ts add import { FormsModule } from '@angular/forms';
also , at app.module.ts add FormMoudle to imports imports :[FormsModule]

  <div >
      <label>Work fee net</label>
      <input type="number"  (change)="getGrossFee()" [(ngModel)]="workNetFee" name="workNetFee" />
  </div>
  <div >
      <label>Work fee gross</label>
      <input type="text"  disabled [(ngModel)]="workGrossFee" name="workGrossFee" />
  </div>
</div>

 workNetFee: number=0;
  workGrossFee : number =0;

 constructor() { }

 ngOnInit(): void {
 }

 getGrossFee(){
  
 this.workGrossFee = this.workNetFee * 1.27;
 }