javascript – PWA – Angular: creating custom numpad for selecting PIN code-ThrowExceptions

Exception or error:

This is my first time with PWA application. A lot of new things to learn.

I need to implement my custom numpad for typing PIN code. I’ve prepared example page:

enter image description here

So I’m thinking how to implement this. At the moment I use html table to create numpad but there is a few things that I don’t know how to implement in correct way.

For example I want to change every “____” to clicked number that will be hide immediately (* like in password type).
User can’t select “___” fields, these are only for displaying values -> touching numpad add selected number to the next empty field (max length = 4) and user can save changes when all fields are filled or can remove last selected number by touching ‘remove field’. I believe it’s typical behavior of all devices.

For everyone who can help me, I’ve created example numpad (without styles). You can eddit this or give me some tips how to implement this and I’ll try to do this by myself:
https://stackblitz.com/edit/angular-nfhnr2

Thank You!

How to solve:

Here is my starter code.
app.component.ts

import { Component, OnInit, ElementRef, ViewChild } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";
  position: number;
  @ViewChild("first", { static: true }) first: ElementRef;
  @ViewChild("second", { static: true }) second: ElementRef;
  @ViewChild("third", { static: true }) third: ElementRef;
  @ViewChild("fourth", { static: true }) fourth: ElementRef;
  ngOnInit() {
    this.position = 1;
  }
  enter(n: number) {
    if (this.position < 5) {
      if (this.position === 1) {
        this.first.nativeElement.value = n;
      }
      if (this.position === 2) {
        this.second.nativeElement.value = n;
      }
      if (this.position === 3) {
        this.third.nativeElement.value = n;
      }
      if (this.position === 4) {
        this.fourth.nativeElement.value = n;
      }
      this.position++;
      console.log(
          "position is " +
          this.position +
           " " +
         "PIN is " +
        this.first.nativeElement.value +
          this.second.nativeElement.value +
          this.third.nativeElement.value +
          this.fourth.nativeElement.value
      );
    }
  }
  back() {
    if (this.position > 1) {
      this.position--;
      if (this.position === 1) {
        this.first.nativeElement.value = "";
      }
      if (this.position === 2) {
        this.second.nativeElement.value = "";
      }
      if (this.position === 3) {
        this.third.nativeElement.value = "";
      }
      if (this.position === 4) {
        this.fourth.nativeElement.value = "";
      }
      console.log(
         "position is " +
          this.position +
          " " +
          "PIN is " +
        this.first.nativeElement.value +
          this.second.nativeElement.value +
          this.third.nativeElement.value +
          this.fourth.nativeElement.value
      );
    }
  }
}

and app.component.html

<div class="d-flex">
  TYPE PIN:
  <div>
    <table>
      <tr>
        <td><input type="password" #first maxlength="1" required readonly placeholder="_" size="1"></td>
        <td><input type="password" #second maxlength="1" required readonly placeholder="_" size="1"></td>
        <td><input type="password" #third maxlength="1" required readonly placeholder="_" size="1"></td>
        <td><input type="password" #fourth maxlength="1" required readonly placeholder="_" size="1"></td>
      </tr>
    </table>
  </div>
  <div>
    <table>
      <tr>
        <td (click)="enter(1)">1</td>
        <td (click)="enter(2)">2</td>
        <td (click)="enter(3)">3</td>
      </tr>
      <tr>
        <td (click)="enter(4)">4</td>
        <td (click)="enter(5)">5</td>
        <td (click)="enter(6)">6</td>
      </tr>
      <tr>
        <td (click)="enter(7)">7</td>
        <td (click)="enter(8)">8</td>
        <td (click)="enter(9)">9</td>
      </tr>
      <tr>
        <td></td>
        <td (click)="enter(0)">0</td>
        <td><button (click)="back()">BACKSPACE</button></td>
      </tr>
    </table>
  </div>
  <div>
    <button>SAVE</button>
  </div>
</div>

Edit: It looks better if we add the following to the css

    input {
  border: hidden;
  }

Here is my StackBlitz

Leave a Reply

Your email address will not be published. Required fields are marked *