Reputation: 165
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
Reputation: 801
import { FormsModule } from '@angular/forms';
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
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