how to replace a html function call by a typescript function call?

Question

This is how my div looks like inside html:

<div class="form-group col">
  <label for="randomName" class="mb-1">Test</label>
  <ngb-timepicker id="randomName" name="start" [(ngModel)]="startTime"
                  [acSmallestTimeUnit]="this.smallestTimeUnit"
                  [acSmallestTimeUnitEnabled]="this.smallestTimeUnitEnabled" [spinners]="false"
                  #start="ngModel"></ngb-timepicker>
</div>

I use a template driven approach for custom validation here. Whenever i change the value of another html element, i would like to trigger the validation of the start element manually. I do that by using the method updateValueAndValidity(). Like this:

<select (change)="onChange(); start.control.updateValueAndValidity();" 
        id="random" class="form-control" #project name="project"
        [(ngModel)]="projectName" #project="ngModel" tabIndex="0" required>

The problem is, i have to call start.control.updateValueAndValidity() after onChange(). But onChange() is asynchronous so in order to call start.control.updateValueAndValidity() after onChange() i would like to call it at the end of the onChange() method which is written in typescript using async and await. I would like to know how to transform the start.control.updateValueAndValitiy() to typescript code so i can call it there, i do not really know how to get the start value. I tried multiple things including document.getElementByName() etc., but nothing worked yet.

Why don't you move start.control.updateValueAndValidity() into onChange and call it in proper place? — Bunyamin Coskuner
– Bunyamin Coskuner, Commented Sep 24, 2019 at 10:03

Bunyamin Coskuner · Accepted Answer · 2019-09-24 10:05:38Z

1

The simplest solution would be to pass start to onChange and call start.control.updateValueAndValidity() within onChange

<select (change)="onChange(start)" 
        id="random" class="form-control" #project name="project"
        [(ngModel)]="projectName" #project="ngModel" tabIndex="0" required>

onChange(start) {
   // some async await call

   start.control.updateValueAndValidity();
}

answered Sep 24, 2019 at 10:05

Bunyamin Coskuner

8,8792 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Votic98 Over a year ago

Thanks, that approach should be working. But theres a problem for some reason. As you see in the code above, i have the following binding [acSmallestTimeUnit]="this.smallestTimeUnit". So whenever i call the validation, the validation class gets an input. I update the this.smallestTimeUnit value before i call start.control.updateValueAndValidity(); but for some reason the validation still gets the old value. I checked it and this.smallestTimeUnit is surely changed before i call the function, i do not know why it still uses the old value on the validation when i trigger it manually.

Bunyamin Coskuner Over a year ago

@Votic98 did you try to use ngModelChange instead of change? Also, make sure you put it after [(ngModel)]="projectName"

Votic98 Over a year ago

Yes, i just tried that and it did not help. It works if i wait like 10 ms before calling the function with setTimeout(function() { start.control.updateValueAndValidity(); }, 10);, but that can not be the solution, because it may cause problems. It seems like it takes some time till the new value gets saved with the binding and the call happens before that?

Bunyamin Coskuner Over a year ago

If you could create a stackblitz that reproduces your problem, I would be more helpful. It is really hard to say anything without running it.

Collectives™ on Stack Overflow

how to replace a html function call by a typescript function call?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related