如何停止用户使用angular 6中的ngx-international-phone-number编辑html页面中的国家代码

Question

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

Answer 1

您可以将其设置为不可编辑。我以新加坡国家代码为例。我已经使用了keydown event。我正在检查国家代码的最后一个位置，如果我有国家代码+65，那么我认为selectionStart大于等于3。

我的Html代码

<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>

和我的.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);
} 

Answer 2

阻止用户编辑输入的最好、最简单的方法是向输入添加disabled属性。

例如<input type="text" name="countrycode" disabled>>

如果有帮助，请让我知道！