Search code examples
javascriptangular

In Angular 17, trying to clean an input after the user arrives in the page via back button generates non-coherent values

In my Angular 17 project, I have a page that does a redirect. I want to be able to clean an input field if the user press the back button after the redirect as the browser (Chrome) is maintaining the old values.

Searching a lot I found this solution to clean the field:

@ViewChild('iptUrl')
set watch(iptUrl: ElementRef) {
    if (iptUrl) {
        console.log('test1', iptUrl);
        console.log('test2', '#' + iptUrl.nativeElement.value + '#');

     // iptUrl.nativeElement.value = '';
     // The above line is what I would do to clean the input. 
     // It's commented so it doesn't interfere in the debugs.

    }
}

But I'm getting an irrational output from the debugs: When I expand in the console, the iptUrl object from the first console.log (test1) the property iptUrl.nativeElement is reporting that the value is "https://192.168.0.155:4200/feee5230". Correct. The old value I want to clean. But the 2nd console.log (test2) is returing '##'. If I try to do iptUrl.nativeElement.value = ''; as I would want nothing happens and the input maintains the old value :/

If I try JSON.stringify(iptUrl) this is the result in the console:

{"nativeElement":{"__ngContext__":8,"__zone_symbol__inputfalse":[{"type":"eventTask","state":"scheduled","source":"HTMLInputElement.addEventListener:input","zone":"angular","runCount":0}],"__zone_symbol__blurfalse":[{"type":"eventTask","state":"scheduled","source":"HTMLInputElement.addEventListener:blur","zone":"angular","runCount":0}],"__zone_symbol__compositionstartfalse":[{"type":"eventTask","state":"scheduled","source":"HTMLInputElement.addEventListener:compositionstart","zone":"angular","runCount":0}],"__zone_symbol__compositionendfalse":[{"type":"eventTask","state":"scheduled","source":"HTMLInputElement.addEventListener:compositionend","zone":"angular","runCount":0}],"__zone_symbol__ngModelChangefalse":[{"type":"eventTask","state":"scheduled","source":"HTMLInputElement.addEventListener:ngModelChange","zone":"angular","runCount":0}],"__zone_symbol__keyupfalse":[{"type":"eventTask","state":"scheduled","source":"HTMLInputElement.addEventListener:keyup","zone":"angular","runCount":0}]}}

No value property.

Here's an image of the output of both console.log debugs above:

Debug print

What's happening here ?

This is the definition of the input in the template:

<input [(ngModel)]="url" (keyup)="validate($event)" #iptUrl id="iptUrl" class="form-control form-control-lg empty" type="text" placeholder="Write here!" aria-label="Write here!" required>

If anyone has a better method to clean this input, the answer would also be accepted.

Edit

Just to clarify, I'm pretty sure that the component's url property is set to an empty string. Proof:

If I try to do:

@ViewChild('iptUrl')
set watch(iptUrl: ElementRef) {
    if (iptUrl) {
        console.log('test1', iptUrl);
        console.log('test2', '#' + iptUrl.nativeElement.value + '#');
        console.log('test3', '%' + this.url + '%');
                    
        //          iptUrl.nativeElement.value = '';
        //          window.iptUrl.value = '';
    }
}

this is the result:

console image

Solution

  • The simplest solution is to force a refresh when back button is pressed, since SPA applications like angular, have issue with back button.

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

@HostListener('window:pageshow', ['$event'])
onPopState(event) {
  location.reload()
}