如何使用angular 6中的ngx-international-phone-number阻止用户在html页面中编辑国家/地区代码 [英] How to stop the user editing the country code in a html page using ngx-international-phone-number in angular 6

问题描述

我们可以阻止用户使用 angular 6 编辑 ngx-international-phone-number 中的国家代码吗?在 appmodule.ts 中导入 ngx-international-phone-number

解决方案

您可以将此设置为不可编辑.我以新加坡国家代码为例.我使用了 keydown 事件.并且我正在检查国家/地区代码的最后位置.因此，如果我有国家/地区代码 +65，那么我正在考虑 selectionStart 大于等于 3.

<块引用>

我的 HTML 代码

<international-phone-number ngModel (keydown)="testInput($event)" name="phone_number" placeholder="输入电话号码" [maxlength]="20" [defaultCountry]="'sg'" [必需]="true" #phoneNumber="ngModel" name="phone_number" [allowedCountries]="['sg']"></international-phone-number><div *ngIf="f.submitted && !phoneNumber.valid" class="help-block">电话号码是必需的，并且应该是有效的</div><button type="submit">提交</button></表单>

<块引用>

我的.ts文件代码如下.

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

<块引用>

获取表单提交值的代码.

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

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

解决方案

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

这篇关于如何使用angular 6中的ngx-international-phone-number阻止用户在html页面中编辑国家/地区代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！