Ionic 4 angular 8 strange issue with reactive forms

@Pratikjaiswa15 wrote:

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)

Posts: 1

Participants: 1

Read full topic