I’m working to a form with two ion-inputs, email and password, which will be a web app(for pc and mobile) and I’ve noticed that autofill doesn’t work - when I type in emails typed before not popup with autofill suggestion appear(I’m not referring about autocomplete that need implementation, like for a searchbar, just the regular browser autofill).
For more details see this.
Is this a normal behavior?
Maybe i should open an issue for that. Usually for pure html input fields autocomplete is activated by default. Ionics input fields disable autocomplete by default. I think you can activate it with
<ion-input autocomplete ...></ion-input>
you can also set it default for your project by changing autocomplete in your config in app.module.ts:
@NgModule({
declarations: [ MyApp ],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
autocomplete: 'on'
})
],
bootstrap: [IonicApp],
entryComponents: [ MyApp ],
providers: []
})
Default values for ion-input:
this._autoFocusAssist = config.get('autoFocusAssist', 'delay');
this._autoComplete = config.get('autocomplete', 'off');
this._autoCorrect = config.get('autocorrect', 'off');
this._keyboardHeight = config.getNumber('keyboardHeight');
this._useAssist = config.getBoolean('scrollAssist', false);
this._usePadding = config.getBoolean('scrollPadding', this._useAssist);
Still not working, don’t know if this may be a problem but my ion-inputs are in a ionic modal
Can you post the code where you use the ion-input and the config part in your app.module, please?
app.module.ts
@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
components
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp,{
autocomplete: 'on'
}),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
components
],
providers: [
StatusBar,
SplashScreen,
Auth,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
modal.html
..... toolbar
<ion-content padding text-center>
<form [formGroup]="authForm" (ngSubmit)="tryLogIn(authForm.value)">
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input autocomplete formControlName="email" type="text" #emailModel></ion-input>
</ion-item>
<div>{{emailModel.value}} - {{serverErr}}</div>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input formControlName="password" [type]="isActive ? 'text' : 'password'"></ion-input>
<ion-icon class="abs_right" *ngIf="!isActive" ios="ios-eye" md="md-eye" (click)="showHidePass($event)" item-right tappable></ion-icon>
<ion-icon class="abs_right" *ngIf="isActive" ios="ios-eye-off" md="md-eye-off" (click)="showHidePass($event)" item-right tappable></ion-icon>
</ion-item>
<ion-grid padding>
<ion-row>
<ion-col col-12 col-sm-9 col-md-4>
<button text-center ion-button full color="primary" type="submit" [disabled]="!authForm.valid">Log In</button>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-content>
modal.ts
export class Modal {
authForm: FormGroup;
rootPage:any;
submitAttempt: boolean = false;
isActive:boolean = false;
private baseURI : string = "http://localhost:8082/test/";
serverErr:string;
constructor(
private params: NavParams,
public formBuilder: FormBuilder,
private authService: Auth,
private navCtrl: NavController,
private storage: Storage
) {
console.log('Role: ', params.get('userRole'));
authForm = formBuilder.group({
email: ['', Validators.compose([
Validators.minLength(5),
Validators.required,
Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"),
//new EmailValidator(authService).isValid
this.containsMagicWord
])],
password: ['',Validators.required]
});
}
tryLogIn(value: any){
console.log(value);
let navPrms = this.params.get('userRole');
//this.authService
let body : string = `key=checkEmail&table=users&role=${navPrms}&userEmail=${value.email}`,
type : string = "application/x-www-form-urlencoded; charset=UTF-8",
headers : any = new Headers({ 'Content-Type': type}),
options : any = new RequestOptions({ headers: headers }),
url : any = this.baseURI + "retrieve-data.php";
this.authService.getUser(url, body, options)
.subscribe((data) =>{
if(data["err"]){
this.serverErr = data["err"];
}
else{
//this.authService.isAuth.next(true);
this.storage.set('sessionData',{isAuth: true, dbData : data, role: navPrms});
this.navCtrl.setRoot(HomePage, {dbData : data});
}
});
}
}
Sorry my fault. I think it should be
<ion-input autocomplete="on" ...></ion-input>
Maybe autocorrect is what you are looking for instead of autocomplete, but I am not sure. I don’t know what autocorrect does.
Ionics code is:
// by default set autocomplete="off" unless specified by the input
if (ionInputEle.hasAttribute('autocomplete')) {
this._autoComplete = ionInputEle.getAttribute('autocomplete');
}
nativeInputEle.setAttribute('autocomplete', this._autoComplete);
// by default set autocorrect="off" unless specified by the input
if (ionInputEle.hasAttribute('autocorrect')) {
this._autoCorrect = ionInputEle.getAttribute('autocorrect');
}
nativeInputEle.setAttribute('autocorrect', this._autoCorrect);
}
you can find it here:
Funny thing!
Both methods work:
IonicModule.forRoot(MyApp, {
autocomplete: 'on'
})
and
<ion-input autocomplete="on" ...></ion-input>
but only if name attribute exists despite of formControlName
<ion-input autocomplete="on" name="email" formControlName="email" type="text" #emailModel></ion-input>
1 Like
Hi,
I am trying to use password autofill in my ios application, i implemented a copy of you’re form in my app but i cant get it work.
The autofill work only when i have already somethings typed in on of the two field > choose a user in the keychain list > click to focus one of the fields
Do you have any idea on what’s going on?
1 Like
any luck? I am facing the same problem.
Same issue using the below.
Works on web but not in app on Android.
autocomplete="address-line1"