Reputation: 965
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