Is there a way to programmatically trigger the onchange event in Angular? (Typescript)

Question

I am returning a value from a dialog box (MatDialogRef) to an input tag. Even though I am changing the value of the input tag, the change event is not getting triggered.

I have tried using the dispatchEvent. All of the documentation and examples I have found show the creation of the event and then triggering. I do not wish to create the event.

Others show the callback within the code. I cannot call the method within the html view change from the component without getting errors on missing parameters.

I have looked at doing this with vanilla JS and TypeScript.

// dialog box opens up clock-like interface to allow the end user to select a start and stop time

// I am using ViewChild to grab the DOM elements
// ViewChild to access startTime and stopTime DOM elements
  @ViewChild( 'startTime' ) elStartTime: ElementRef;
  @ViewChild( 'stopTime' ) elStopTime: ElementRef;

// This method runs when the ok button is clicked that closes the dialog
public calcHours (): void {
    // Variables to capture timeClock entries from DOM. Total variable to house calculation
    let currentStartTime = this.elStartTime.nativeElement.value;
    let currentStopTime = this.elStopTime.nativeElement.value;
    // Cast the returned time from string to number
    currentStartTime = +( currentStartTime.slice( 0, -( currentStartTime.indexOf( ':' ) + 1 ) ) );
    currentStopTime = +( currentStopTime.slice( 0, -( currentStopTime.indexOf( ':' ) + 1 ) ) );
    // Math to calculate the number of hours based upon the returned string time
    const totalHours = currentStopTime - currentStartTime;
    if ( currentStartTime !== '' && currentStopTime !== '' ) {
      this.dialogRef.close( totalHours );
    }
  }

// On the main component, I am using ViewChild to grab the input
// ViewChild to access hours worked DOM elements
  @ViewChild( 'hoursWorked' ) elHoursWorked: ElementRef;

// When the dialog closes, this method runs and changes the hoursWorked input
dialogRef.afterClosed().subscribe( result => {
      // Value returned from dialog box
      const dialogHoursCalc = `${ result }`;
      // Set value of input field from dialog box
      this.renderer.setProperty( this.elHoursWorked.nativeElement, 'value', dialogHoursCalc );
    } );

// My html template input tag is as follows...
<input class="form-control" type="number" step="0.01" data-number-to-fixed="2" placeholder="0.00"
                            (change)="onRecordUpdated(timeCard, timecarddet)" [(ngModel)]="timecarddet.hours" min="0"
                            max="365" #hoursWorked>

Expectation - The end user opens up the dialog box with the clock-like interface. They select a start and stop time. They click the ok button. The dialog closes and the hoursWorked input field is updated. The updating of the input field triggers the change event and the onRecordUpdated method runs.

Actual - The end user opens up the dialog box with the clock-like interface. They select a start and stop time. They click the ok button. The dialog closes and the hoursWorked input field is updated. The change event is never triggered and the onRecordUpdated method never runs.

How do I get the change event to trigger and have the onRecordUpdated method run?

Possible duplicate of How do I programmatically force an onchange event on an input? — nircraft
– nircraft, Commented Apr 5, 2019 at 19:41
I do not believe this is a duplicate as I am trying to do this in Angular/Typescript not JS — Clay Hess
– Clay Hess, Commented Apr 5, 2019 at 22:21
@ClayHess I deleted my answer, I noticed that it was incorrect since subscribe should trigger change detection without any explicit action. If it doesn't happen, it probably means you're out of a zone. It usually happens when you use libraries that aren't thought for Angular inside an Angular project — Christian Vincenzo Traina
– Christian Vincenzo Traina, Commented Apr 6, 2019 at 21:34
Cristian...thanks for the update. Can you explain what you mean by "use libraries that aren't thought for Angular" please? — Clay Hess
– Clay Hess, Commented Apr 6, 2019 at 23:27
I tried a different route. I have jQuery in my app. So I thought I would use .val() and .change() to trigger the calculation. So I put in $(selector).val(myValue).trigger('change'); The change event does not get triggered. I am not sure why. Is it because I am also using ngModel and that is superseding the jQuery change method? — Clay Hess
– Clay Hess, Commented Apr 8, 2019 at 20:05

Ashijo · Accepted Answer · 2020-01-22 22:49:39Z

-2

That's late, but for the next person that will has this problem :

Get ChangeDetectorRef from angular core
Call detectChanges function;


import { ChangeDetectorRef } from '@angular/core';

export class FooComponent {
  constructor(
    private changeDetector: ChangeDetectorRef
  ) {}

  fooEvent(){
    this.changeDetector.detectChanges();
  }
}

edited Jan 22, 2020 at 22:49

answered Jan 22, 2020 at 22:41

Ashijo

1449 bronze badges

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

Collectives™ on Stack Overflow

Is there a way to programmatically trigger the onchange event in Angular? (Typescript)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related