Calculation of total of three fields not working in angular

3623 views javascript
4

Actually i have three fields and i need to show the sum of these fields in last total input field. I have tried my method and the value of these three field are coming in console but not displaying the total.What is the problem i am getting i am not able to identify what is the problem?

My Logic:

@Component({
  selector: 'app-pre-assestment',
  templateUrl: './pre-assestment.component.html',
  styleUrls: ['./pre-assestment.component.css']
})
export class PreAssestmentComponent implements OnInit {

    one:number;
    two:number;
    three:number;

    total:number;

public currentstatus: any;


 beforeAddClicked=false;*/
selections: Observable<Selection[]>;


preAssessment: PreAssesstment = new PreAssesstment();
  submitted = false;

  constructor(private selectionService: SelectionService,private preassessmentService:PreAssessmentService,private authService:LoginAuthService) {
      this.authService.isLoggedIn();
   }

  ngOnInit() {

  this.total=this.Ontotal();
  }

  onSearchChange(searchValue : number ) {
 this.one=searchValue;
 console.log(this.one);
 return this.one;  
  }

  onSearchChange1(searchValue : number ) {
 this.two=searchValue;
 console.log(this.two);
 return this.two;  
  }

  onSearchChange2(searchValue : number ) {
 this.three=searchValue;
 console.log(this.three);
 return this.three;  
  }

 Ontotal(){
   console.log(this.one+this.two+this.three);
   return this.one+this.two+this.three;
 }

}

html file to display

<div class="col-md-1"> 
   <label>Customs</label>
</div>
<div class="col-md-6">
   <input type="text" class="form-control" id="" required [(ngModel)]="preAssessment.customReason" name="customReason" (input)="onSearchChange($event.target.value)">
</div>
<div class="col-md-2">
   <input type="text" class="form-control" id="" required [(ngModel)]="preAssessment.customAmount" name="customAmount" (input)="onSearchChange1($event.target.value)">
</div>
<div class="col-md-2">
   <input type="text" class="form-control" id="" required [(ngModel)]="preAssessment.customPenalty" name="customPenalty" (input)="onSearchChange2($event.target.value)">
</div>
<div class="col-md-1">
   <input type="text" class="form-control" id="" required [(ngModel)]="preAssessment.customTotal" name="customTotal" value="{{total}}">
</div>

My forms looks like :

enter image description here

answered question

are you sure the variable names are correct? there is no object named preAssement in your component.ts

yes i have initialized as preAssessment: PreAssesstment = new PreAssesstment();

@ashwinkarki post the code

ok i will edit and post the full code see only the relevant codes ok

yes edited @Sajeetharan

Total calculation should be triggered after one or two or three changes, if that is what you want.

yes yes @wannadream

Your code is redundant. All three inputs are already bound to object preAssessment. Why you still need one, two, three, and total in component? And if you do not want user to change the value of total, you need to disable the input control or make it read-only.

2 Answers

4

Your code never tells total to update. Simplest solution would be to put

this.total = this.Ontotal();

at the end of each onSearchChange function, before the return.

Update - they are being treated as strings. Change your Ontotal() function to:

Ontotal(){
   console.log(this.one+this.two+this.three);
   return +this.one + +this.two + +this.three;
}

(Note the + at the beginning of the calculation)

posted this
12

First of all you do not need another 3 variables when you alreayd hae a Model defined as PreAssestment, use the same Model for your calculations,

Also you need to use + to cast the string to an Integer, Please find the clean code which you would use as follows,

export class AppComponent {
   preAssessment: PreAssesstment = new PreAssesstment();
  constructor() {

   }

  ngOnInit() {
    this.preAssessment.customAmount = 0;
    this.preAssessment.customTotal = 0;
    this.preAssessment.customPenalty = 0;

  }

  onSearchChange(searchValue : number ) {    
  }

  onSearchChange1(searchValue : number ) {
     this.preAssessment.customTotal = this.preAssessment.customAmount + this.preAssessment.customPenalty;
  }

  onSearchChange2(searchValue : number ) {
     this.preAssessment.customTotal = +this.preAssessment.customAmount + +this.preAssessment.customPenalty;
  }
}


export class PreAssesstment {
  customAmount: number;
  customPenalty: number;
  customTotal: number;
  body: string;
}

STACBKLITZ DEMO

posted this

Have an answer?

JD

Please login first before posting an answer.