Using ion-button to type text and hide keyboard ionic 3

Ionic Framework ionic-v3
1

Hello there,

In this project I’m trying to do a security page (named Login) before access my ionic app data based on pin password. I’m stucked in ion-button, my objective is to not show the keyboard (just in LoginPage) and use ion-button to type the password on the password box. This is how it looks now:

35
35720×1280 39.2 KB

Here I what to type with ion buttons and keep keyboard hided:

40
40720×1280 64.8 KB

This is my following code:

login.ts

import { Component } from ‘@angular/core’;
import { NavController, AlertController, LoadingController, Loading, IonicPage } from ‘ionic-angular’;
import { AuthServiceProvider } from ‘…/…/providers/auth-service/auth-service’;
import { TabsPage } from ‘…/tabs/tabs’

@IonicPage()
@Component({
selector: ‘page-login’,
templateUrl: ‘login.html’,
})
export class LoginPage {
loading: Loading;
registerCredentials = { email: ‘’, password: ‘’ };

constructor(private nav: NavController, private auth: AuthServiceProvider, private alertCtrl: AlertController, private loadingCtrl: LoadingController) { }

public login() {
this.showLoading()
this.auth.login(this.registerCredentials).subscribe(allowed => {
if (allowed) {
this.nav.setRoot(TabsPage);
} else {
this.showError(“Acesso Negado”);
}
},
error => {
this.showError(error);
});
}

showLoading() {
this.loading = this.loadingCtrl.create({
content: ‘Espere por favor…’,
dismissOnPageChange: true
});
this.loading.present();
}

showError(text) {
this.loading.dismiss();

let alert = this.alertCtrl.create({
  title: 'Falha',
  subTitle: text,
  buttons: ['OK']
});
alert.present();

}

}

login.html

       <ion-content class="login-content" padding>
           <div class="login-box">
                 <form (ngSubmit)="login()" #registerForm="ngForm">
                    <ion-row>
                       <ion-col>
                         <ion-list inset>
        
        <ion-item>
          <ion-input type="password" placeholder="Password" name="password" [(ngModel)]="registerCredentials.password" required></ion-input>
        </ion-item>
        
      </ion-list>
    </ion-col>
  </ion-row>
  <ion-grid>
    <ion-row>
      <ion-col>
        <button ion-button round outline large color="light" (click)="1">1</button>
      </ion-col>
      <ion-col>
        <button ion-button round outline large color="light" (click)="2">2</button>
      </ion-col>
      <ion-col>
        <button ion-button round outline large color="light" (click)="3">3</button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <button ion-button round outline large color="light" (click)="4">4</button>
      </ion-col>
      <ion-col>
        <button ion-button round outline large color="light" (click)="5">5</button>
      </ion-col>
      <ion-col>
        <button ion-button round outline large color="light" (click)="6">6</button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <button ion-button round outline large color="light" (click)="7">7</button>
      </ion-col>
      <ion-col>
        <button ion-button round outline large color="light" (click)="8">8</button>
      </ion-col>
      <ion-col>
        <button ion-button round outline large color="light" (click)="9">9</button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col></ion-col>
      <ion-col>
        <button ion-button round outline large color="light" (click)="0">0</button>
      </ion-col>

      <ion-col></ion-col>
    </ion-row>
    <ion-row>
      <ion-col></ion-col>
    </ion-row>
    <ion-row>
      <ion-col></ion-col>
    </ion-row>
    <ion-row>
      <ion-col></ion-col>
    </ion-row>
    <ion-row>
      <ion-col></ion-col>
    </ion-row>
    <ion-row>
      <ion-col></ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <button ion-button class="submit-btn" full type="submit" [disabled]="!registerForm.form.valid">Login</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>

login.scss

page-login {

.login-content {
  background: rgb(60, 17, 17);


  .login-box {
    background: rgb(60, 17, 17);
    padding: 20px 20px 0px 20px;
    margin-top: 10px;
  
  }

  ion-row {
     align-items: center;
     text-align: center;
   }

   ion-item {
       border-radius: 30px !important;
       padding-left: 30px !important;
       font-size: 0.9em;
       margin-bottom: 10px;
       border: 1px solid #ffffff;
       border-bottom: 0px !important;
       box-shadow: none !important;
   }

   .submit-btn {
     background: rgb(0, 0, 0);
     border-radius: 30px !important;
     border: 1px solid #ffffff;

   }
}

}

provider Auth-service.ts

import { Injectable } from ‘@angular/core’;
import {Observable} from ‘rxjs/Observable’;
import ‘rxjs/add/operator/map’;

export class User {
name: string;
email: string;

constructor(name: string, email: string) {
this.name = name;
this.email = email;
}
}

@Injectable()
export class AuthServiceProvider {
currentUser: User;

public login(credentials) {
if (credentials.password === null) {
return Observable.throw(“Insira o login.”);
} else {
return Observable.create(observer => {
// At this point make a request to your backend to make a real check!
let access = (credentials.password === “1234”);
this.currentUser = new User(‘xxx’, ‘xxx’);
observer.next(access);
observer.complete();
});
}
}
}

Thanks for your help.