Unable to remove textfield value in Ionic Angular

I'm Working on a project which is made in ionic and angular the issue i'm facing is whenever admin creates as user, user gets a signup link. when user opens a link a signup form shows then i'd applied all validations on it the issue is browser automatically fills the username field with it's may be cache value but after clicking it's get validated i want to validate it on page load but value is not present there it's empty.
i've attache screenshots fro the same.

after clicking anywhere on page

this validation works.

Anyone knows what can i do here. I want to show validation on page load if there is a wrong value

Here is the Code For Signup.html :-

<ion-label stacked>CHOOSE A USERNAME</ion-label>
<ion-item>
<ion-input formControlName="username" trim="blur" id="username" type="text" (click)="validation()" (blur)="isUsernameUnique($event.target.value)"					 

[class.invalid]="!signupForm.controls.username.valid && (signupForm.controls.username.dirty || submitAttempt)" (focus)="isTouched('username',true)"
(focusout)="isTouched('username',false)">
</ion-input><ion-icon name="checkmark" item-right color="green" *ngIf="signupForm.controls['username'].valid && is_unique_username"></ion-icon></ion-item>				
<p class="error m-0-auto" col-12 ion-text color="danger" *ngIf="signupForm.controls['username'].hasError('required') && signupForm.controls['username'].touched && !signupForm.controls['username'].hasFocus">Username field is required.</p><p class="error m-0-auto" col-12 ion-text color="danger"*ngIf="signupForm.controls['username'].hasError('pattern') && signupForm.controls['username'].touched || signupForm.controls['username'].untouched && !signupForm.controls['username'].hasFocus && signupForm.controls['username'].toString().trim() === ''">Please enter a valid username.</p>

And For Signup.ts :-

export class SignupPage implements AfterViewInit{
@ViewChild('myInput', { read: ElementRef }) myInput: ElementRef;
ngAfterViewInit() {
	if (this.myInput) {
	  const inputElement = this.myInput.nativeElement as HTMLElement;
	  this.renderer.setAttribute(inputElement, 'tabIndex', '0');
	  inputElement.focus();
	}
  }

ionViewDidEnter() {
	console.log("Username", this.signupForm.value['username']);
}

}

The problem with this issue is that is the browser who manage how credentials are put into the fields.

Maybe you can workaround it by waiting 0.5 secs and setting the focus on the input or something like this to trigger the validations.

@ViewChild('myInput', {static:true}) myInput: IonInput;

--------

setTimeout(function(){
    this.myInput.setFocus();
}, 500);