Ionic 4 Form Validator Errors on iOS not appearing

Hello!

My ionic form validators aren’t appearing on iOS. What I expect, is that when a user clicks on any of the text inputs, a red border to appear underneath until they satisfy the validators - yet for iOS I get no indication:

image822×751 44.8 KB

My code:
–signup.page.ts

  this.formSignUp = this.formBuilder.group({
      firstName: ["", [Validators.required, Validators.pattern(this.notOnlySpaces)]],
      lastName: ["", [Validators.required, Validators.pattern(this.notOnlySpaces)]],
      email: ["", [Validators.required, Validators.pattern(this.notOnlySpaces)]],
      dob: ["", [Validators.required, this.under18]],
      telephone: ["", Validators.compose([Validators.required, Validators.pattern(this.internationalNumberFormat)])],
      // email:['',Validators.compose([Validators.required,Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
      password: ["", Validators.compose([Validators.minLength(6),Validators.required])],
      confirmPassword: ["", Validators.compose([Validators.minLength(6),Validators.required])],
      isAgreed: [false, Validators.requiredTrue],
    });
    this.formSignUp.controls['password'].valueChanges.subscribe((value) => {
      this.passwordStrength = this.checkPasswordStrength(value)
    })
  }

I was doing research and found a stackoverflow post which stated that iOS has some CSS properties adjusted differently, and advised users to add this line to their ‘theme/variable.scss’ file:

$text-input-ios-show-focus-highlight: true;

But that’s not functioning for me. Is there somewhere specific where should I be placing that line? Anyone have any other suggestions?

1 post - 1 participant

Read full topic