CODEWITHSUNDEEP
htmlcssangular6
Sravya
Sravya

Reputation: 65

How to stop the user editing the country code in a html page using ngx-international-phone-number in angular 6

Can we stop the user editing the country code in ngx-international-phone-number using angular 6 imported ngx-international-phone-number in appmodule.ts

Upvotes: 1

Views: 1573

Answers (2)

Sitesh Ranjan
Sitesh Ranjan

Reputation: 73

you can make this non editable. I have taken the example of Singapore country code. I have used keydown event. and I am checking the last position of country code.so if I have country code +65 then I am considering selectionStart greater than equal to 3.

My Html Code

<form name="sample-form" (ngSubmit)="submit(f)" #f="ngForm">
    <international-phone-number ngModel (keydown)="testInput($event)" name="phone_number" placeholder="Enter phone number" [maxlength]="20" [defaultCountry]="'sg'" [required]="true" #phoneNumber="ngModel" name="phone_number" [allowedCountries]="['sg']"></international-phone-number>

     <div *ngIf="f.submitted && !phoneNumber.valid" class="help-block">Phone number is required and should be valid</div>
     <button type="submit">Submit</button>
   </form>

and my .ts file code is as below.

    testInput(event) 
{
  if (!(event.target.selectionStart >= 3) || (event.target.selectionStart < 4 && event.key === 'Backspace')) 
  {
    event.stopPropagation();
    event.preventDefault();
  }
}

code to get the value on form submit.

    submit(f: NgForm) {
  console.log(f.value);
}

Upvotes: 2

Constantin Chirila
Constantin Chirila

Reputation: 2129

Best and simplest way you can stop a user editing an input is by adding the disabled attribute to the input.

For example <input type="text" name="countrycode" disabled>>

Let me know if that helps!

Upvotes: 0

Related Questions