Rohit
Rohit

Reputation: 965

ionic angular strange issue- custom form validator not getting called on android

I am working on ionic 4 angular mobile app. I am facing one strange issue wherein custom form validation is not getting called on android device but its getting called and working as per expectation.

After going into detail it seems that if the input type is text then it is causing problem and it is working if input type is password.

Have confirmed below points

.ts file code

   this.loginForm = new FormGroup({
      username: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required)
    },this.loginFormValidator());

.html file code

<fd-form-input-validation-message [errorType]="'error'" [errorVisible]="loginForm.errors?.username && loginForm.dirty ? 'true': 'false'" [errorMessage]="'Please enter username'">
                <input
                  #username
                  formControlName="username"
                  fd-form-control
                  type="text"
                  id="form-input-1"
                  name="username"
                  id="username"
                  autocapitalize="none"
                  autocomplete="off"
                  autocorrect="off"
                  required
                  type="text"
                  (keyup.enter)="onClickNext(password)"
                  [state]="loginForm.errors?.username && loginForm.dirty?'invalid':''"
                  placeholder="{{ 'LOGIN.USER_NAME_PLACEHOLDER' | translate }}"
                />
              </fd-form-input-validation-message>

Validation function code is

loginFormValidator(): ValidatorFn {
    debugger;
    console.log("validation function called");
    return (control: FormGroup): ValidationErrors | null => {
      const errors: ValidationErrors = {};
      if ((control.get('username').value.length>=1 && control.get('password').value.length>=1)) {
          this.footerButtonConfig.disableStatus=false;

      }
      else{ 
          this.footerButtonConfig.disableStatus=true;
          if(control.get('username').value.length==0 && control.get('username').dirty){
          errors.username = {
            message: 'Please enter username'
          };
        }
        if(control.get('password').value.length==0 && control.get('password').dirty){
          errors.password = {
            message: 'Please enter password'
          };
        }
      }
      return Object.keys(errors).length ? errors : null;
    };
  }

Package.json is

    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/http": "^7.2.15",

As mentioned above if type="password" then validation function is getting called on all 3 platforms(web,ios,android) What could be the possible root cause of this issue?

Upvotes: 2

Views: 474

Answers (0)

Related Questions