Restrict user to enter first two characters as Alphabets and not numbers

Question

How to achieve this I am using Angular 7 and typescript I have a Input field data like this DK9520000123456789 So i want the user to restrict to enter the first two characters only be letters and not numbers. ("DK"9520000123456789) I do not want the user to enter numbers in the first two characters.

<form class="bank-form-container {{ labelClass }}" [formGroup]="bankForm">
  <div class="col-md-6 pl-0">
    <label for="bankAcc" class="bank-label"> {{ label }}<i class="validateField">*</i> </label>
    <input
      [type]="isMaskedBankAcc ? 'password' : 'text'"
      (keypress)="numericOnly($event)"
      oninput="this.value = this.value.toUpperCase()"
      id="bankAcc"
      sp-popover
      name="bankAccountNumber"
      placement="right"
      placeholder="{{ placeHolder }}"
      class="form-control sp-focus text-uppercase"
      formControlName="bankAcc"
      appBlockCopyPaste
      autocomplete="off"
      (blur)="maskAndEncryptBankNumber()"
      (focus)="unmaskBankNumber()"
      [ngbTooltip]="toolTip"
      [pattern]="pattern"
      [required]="isRequired"
    />

ngOnInit() {



    this.bankForm = new FormGroup({
      bankAcc: new FormControl({ value: this.value ? this.value : '', disabled: this.isDisabled }, [
        Validators.required,
        Validators.pattern(/^\w{2}\d+$/i),
      ]),
      bankConfirmedAcc: new FormControl({ value: this.value ? this.value : '', disabled: true }, [
        Validators.required,
        Validators.pattern(/^\w{2}\d+$/i),
        this.checkMatchingValues.bind(this),
      ]),
    });

    this.checkFormValues();
    this.unmaskConfirmedBankNumber();
  }

check please this question: https://stackoverflow.com/questions/21928083/iban-validation-check — AndreasT, Apr 23 '20 at 17:33

satanTime · Answer 1 · 2020-04-23T18:24:37.050

0

I assume you're using a FormControl for that.

Then simply add pattern validator: Validators.pattern(/^\w{2}\d+$/i). It requires a user to enter 2 letters and then only numbers.

this.form = new FormGroup({
    inputField: new FormControl('', {
        validators: [Validators.required, Validators.pattern(/^\w{2}\d+$/)],
    }),
});

in template

<input [formControl]="form.get('inputField')">
<div *ngIf="form.get('inputField').hasError('pattern')">wrong pattern</div>

edited Apr 23 '20 at 18:24

answered Apr 23 '20 at 18:20

satanTime

12,631
1
25
73

where should i add the pattern validatior? – Sai Ram Apr 23 '20 at 18:21
THIS IS MY INPUT – Sai Ram Apr 23 '20 at 18:23
usually you should have a FormGroup, then the 2nd argument is the place to add validators. – satanTime Apr 23 '20 at 18:23
{{ label }}*
– Sai Ram Apr 23 '20 at 18:25
yeah, your input should be refactored. instead of `this.value = this.value` try to use `formControl`. – satanTime Apr 23 '20 at 18:25
No need to add anything in typescript , can you add beside input and show me please – Sai Ram Apr 23 '20 at 18:25
I've updated the answer. Also please check https://angular.io/guide/reactive-forms - that's one of techniques how to work with inputs in Angular. – satanTime Apr 23 '20 at 18:27
i already have this in my ts file Validators.pattern(this.pattern) how to add this pattern in my case (/^\w{2}\d+$/) – Sai Ram Apr 23 '20 at 18:36
replace `this.pattern` with `(/^\w{2}\d+$/i` or set the `pattern` property of the class to `(/^\w{2}\d+$/i`, no quotes, copy it as it is. – satanTime Apr 23 '20 at 18:40
i am using keypress event – Sai Ram Apr 23 '20 at 18:41
numericOnly(event): boolean { let patt = (/^\w{2}\d+$/) let result = patt.test(event.key); return result; } will this work – Sai Ram Apr 23 '20 at 18:41
let patt = /^\w{2}\d+$/; is this correct what is w and d? – Sai Ram Apr 23 '20 at 18:44
numericOnly(event): boolean { let patt = /^\w{2}\d+$/; let result = patt.test(event.key); return result; } THIS DOES NOT WORK :( – Sai Ram Apr 23 '20 at 18:45
it's hard to say what is wrong, you can post the code of the component and the template in the question for better understanding. – satanTime Apr 23 '20 at 18:46
I'm not sure `event.key` contains the value of the input. maybe just a key of hit button. – satanTime Apr 23 '20 at 18:47
The code you posted looks good, the fields won't be valid unless their value is DK9520000123456789 – satanTime Apr 23 '20 at 18:55
that is ok my problem is i want to prevent the user from entering numeric values at first two places instead of "DK" user should not enter numbers – Sai Ram Apr 23 '20 at 18:56
CAN YOU HELP ME WITH THIS – Sai Ram Apr 23 '20 at 19:00
aaah, so you want to omit wrong input, don't you? if I typed D and then type 9 - the input still has D without 9, right? – satanTime Apr 23 '20 at 21:33
correct that is what i needed how to do that help me – Sai Ram Apr 23 '20 at 22:00
Then use the pattern from our thread and this callback: https://stackoverflow.com/a/44419588/13112018 – satanTime Apr 24 '20 at 08:09

Restrict user to enter first two characters as Alphabets and not numbers

1 Answers1