OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter Nelson Teixeira
  • Start date Start date
N

Nelson Teixeira

Guest
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:

Code:
@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.

Where'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:

Code:
<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.

Thanks.

<p>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.</p>
<p>Searching a lot I found this solution to clean the field:</p>
<pre><code>@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.

}
}
</code></pre>
<p>But I'm getting an irrational output from the debugs:
When I expand in the console, the <code>iptUrl</code> object from the first console.log (test1) the property <code>iptUrl.nativeElement</code> is reporting that the value is <code>"https://192.168.0.155:4200/feee5230"</code>. Correct. The old value I want to clean. But the 2nd console.log (test2) is returing '##'.
If I try to do <code>iptUrl.nativeElement.value = '';</code> as I would want nothing happens and the input maintains the old value :/</p>
<p>If I try <code>JSON.stringify(iptUrl)</code> this is the result in the console:</p>
<p><code>{"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}]}}</code></p>
<p>No value property.</p>
<p>Where's an image of the output of both console.log debugs above:</p>
<p><a href="https://i.sstatic.net/Z2QbgvmS.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Z2QbgvmS.png" alt="Debug print" /></a></p>
<p>What's happening here ?</p>
<p>This is the definition of the input in the template:</p>
<pre><code><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>
</code></pre>
<p>If anyone has a better method to clean this input, the answer would also be accepted.</p>
<p>Thanks.</p>
 

Online statistics

Members online
0
Guests online
3
Total visitors
3
Top