Why is Angular input [value] = "function()" running multiple times?

Question

I have simple code where I display the value of an input in HTML template from an array of data that I have in Typescript. I ran into a problem, where the data wasn't loaded fast enough and I was getting errors until the data was loaded. I fixed that by checking if the endTime or StartTime are empty. while trying to fix the problem I've noticed that my console.log is printing many times. I expected that this function would run once. Why is it running many times? Am I doing something wrong? Or is this how angular is supposed to work?

To give more information this is HTML code.

I have multiple cards that have 2 input value that call my function returnTime()

<mat-card *ngFor="let item of requestVehicles.controls; let pointIndex=index" [formGroupName]="pointIndex">

The function is called like this

<input [value]="returnTime(pointIndex, true)">

The actual function

  returnTime(pointIndex, isEnd) {
    if (this.data.isEdit) {
      console.log('ENDTIME =======' + this.endTime + '          STARTTIME =========' + this.startTime);
      // rest of the logic that should not be relevant.
    } else {
      return '';
    }
  }

the maximum value of pointIndex is usually 2-3. so that should not explain the amount of console logs.

To start with, value attributes are worthless in Angular. And to answer you, functions, getters and variables in the template are checked several times by Angular to detect changes. Just by moving your mouse around, you will see that it triggers them several times. It's usually a bad practice to bind functions to inputs, they should be bound only to outputs (events). — user4676340
– user4676340, Commented Nov 14, 2018 at 8:46
then how do I give value to an input? I want the previous value to appear when I edit, instead of creating new. — GreedyAi
– GreedyAi, Commented Nov 14, 2018 at 9:07
An input should be bound with a ngModel or formControl attribute : if you want to give it a value, give a value to that model/form control. — user4676340
– user4676340, Commented Nov 14, 2018 at 9:09
I can't use any of them. I am using 2 inputs for 1 formControl. Date and time, the date input is bound by using formControl, but the time I manually take the value and change the time. Thats because angular material datepicker doesn't let me change time. — GreedyAi
– GreedyAi, Commented Nov 14, 2018 at 9:15
Yeah well then that's bad code for bad design. Instead of doing weird things, consider making a custom form control through ControlValueAccessor that will handle both date & time. — user4676340
– user4676340, Commented Nov 14, 2018 at 9:16

user4676340 · Accepted Answer · 2018-11-14 09:25:48Z

1

Following my comments :

You want a datepicker that handles both date & time. Because of that, you create two inputs that are both bound to a single form control / ngModel.

This is bad design : Angualr doesn't that possibility into account.

Instead of doing that, you should create a new, custom form control implementing ControlValueAccessor.

You can find the documentation here : https://angular.io/api/forms/ControlValueAccessor

Collectives™ on Stack Overflow

Why is Angular input [value] = "function()" running multiple times?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related