CODEWITHSUNDEEP
angulartypescript
Csabikaaaa
Csabikaaaa

Reputation: 165

input value change based on a input value

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 class="form-row">
    <div class="form-group col-md-4">
        <label>Work fee net</label>
        <input type="text" class="form-control">
    </div>
    <div class="form-group col-md-4">
        <label>Work fee gross</label>
        <input type="text" class="form-control" 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!

Upvotes: 0

Views: 5245

Answers (2)

Aml
Aml

Reputation: 801

  • at app.module.ts add import { FormsModule } from '@angular/forms';
  • also , at app.module.ts add FormMoudle to imports imports :[FormsModule]
  <div class="form-group col-md-4">
      <label>Work fee net</label>
      <input type="number" class="form-control" (change)="getGrossFee()" [(ngModel)]="workNetFee" name="workNetFee" />
  </div>
  <div class="form-group col-md-4">
      <label>Work fee gross</label>
      <input type="text" class="form-control" disabled [(ngModel)]="workGrossFee" name="workGrossFee" />
  </div>
</div>

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

 constructor() { }

 ngOnInit(): void {
 }

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

Upvotes: 1

Balastrong
Balastrong

Reputation: 4474

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 class="form-row">
    <div class="form-group col-md-4">
        <label>Work fee net</label>
        <input type="text" class="form-control" (change)="getGrossFee($event)">
    </div>
    <div class="form-group col-md-4">
        <label>Work fee gross</label>
        <input type="text" class="form-control" [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;
  }

}

Upvotes: 1

Related Questions