I am a firebase phone authentication in my ionic app. After success, I redirect users to details
page which asks the user for name and email. But there is a strange problem. After redirecting, the formcontrols name and email are always invalid even though the right values are typed. If I refresh the page then, it is working fine.
I can’t get what is going wrong. I have used invisible ReCaptcha for firebase phone authentication if that matters
Thank you in advance here is the code
.ts
userDetails = this.fb.group({
name : ['', [Validators.required, Validators.minLength(3), Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*') ] ],
Email : ['', [ Validators.required , Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}
```) ]],
})
submit(email, name ){
console.log(email)
console.log(name)
}
.html
<form [formGroup] = "userDetails">
<ion-card>
<ion-item>
<ion-label position="floating">Enter your name</ion-label>
<ion-input formControlName = "name" type = "text"></ion-input>
</ion-item>
<div style="color:red; padding-top: 0.2rem" *ngIf= "name.invalid && name.touched">
<small *ngIf = "name.errors?.required" class="text-danger"> name is required</small>
<small *ngIf = "name.errors?.minlength" class="text-danger"> name must be at least 3 characters </small>
<small *ngIf = "name.errors?.pattern" class="text-danger"> Enter valid name </small>
</div>
<br>
<ion-item>
<ion-label position="floating">Enter your email </ion-label>
<ion-input formControlName = "Email" type = "text"></ion-input>
</ion-item>
<div style="color:red; padding-top: 0.2rem" *ngIf= "Email.invalid && Email.touched">
<small *ngIf = "Email.errors?.pattern" class="text-danger"> Enter a valid email address </small>
</div>
<br>
<br>
<ion-button type="submit" [disabled]="!userDetails.valid" (click)="submit(Email.value, name.value )">Submit</ion-button>
</ion-card>
</form>
Sometimes it also shows this error
Uncaught (in promise) Timeout (g)