ngModelChange value undefined when passed to function

Question

I am using Angular autocomplete which I have connected to an API. Search results should not be returned until after typing has started. After typing a few letters in the box this error comes up in the console.

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'xxxx'. Current value: 'undefined'..

I have tried using change detection but that hasn't helped.

The main issue seems to be with the collectFieldValue function because, without it, when I console log the value, the value never becomes undefined.

Search.component.html

    <input type="text" class="searchItem" placeholder="Begin your’"
    aria-label="Begin your search" matInput [matAutocomplete]="auto" (ngModelChange)="inputCheck($event)" 
    [(ngModel)]="searchInput" (focusout)="onFocusOut()" (focus)="onFocus()"
    (keydown)="onKeyDown()" >

Search.component.ts

@Input() setSelectedLocation!: Function;

     inputCheck(value: any) {
        if (value !== undefined && value !== "" && value !== null) 
        {
          this.collectFieldValue(value, this.sharedService.sharedVal && this.sharedService.sharedVal !== "" ? this.sharedService.sharedVal : undefined)
        }
      }

Main.component.html

<app-search-box
    [collectFieldValue]="triggerLocationSearch"
    [setSelectedLocation]="setSelectedLocation">
</app-search-box>

score 0 · Answer 1 · answered Jun 28 '22 at 16:55

0

ExpressionChangedAfterItHasBeenCheckedError usually happens when something in template changes before the entire template is rendered the first time. E.g some function in template changes template itself.

Wrap the suspected method in setTimeout to trigger this in next cycle. If that removes the error then you've found out the culprit.

Afterwards figure out why template change happens before it's rendered. Right not I can't spot the problem.

setTimeout(() => {
 this.collectFieldValue(value, this.sharedService.sharedVal && this.sharedService.sharedVal !== "" ? this.sharedService.sharedVal : undefined)
})

answered Jun 28 '22 at 16:55

Joosep Parts

5,372
2
8
33

This does not work – A.Mac Jun 28 '22 at 21:39
It was just a guess, you need to find the problematic area yourself.Iindeed it may not be the one I showed the example with. – Joosep Parts Jun 29 '22 at 01:48

score 0 · Answer 2 · answered Sep 18 '22 at 22:43

I was getting this error after modifying a Map object that was being iterated over using

*ngFor="let entry of myMap.entries()"

The fix that worked for me was adding ChangeDetectionStrategy.OnPush to my component declaration:

@Component({
  selector: 'component',
  templateUrl: 'component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})..

ngModelChange value undefined when passed to function

2 Answers2