No autofill for ionic-input, ionic 2


#1

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?


#2

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);

#3

Still not working, don’t know if this may be a problem but my ion-inputs are in a ionic modal


#4

Can you post the code where you use the ion-input and the config part in your app.module, please?


#5

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});
      }      
    });
 }
}

#6

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:


#7

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>