如何使用angular 6中的ngx-international-phone-number阻止用戶在html頁面中編輯國家/地區代碼

Question

我們可以阻止用戶在 appmodule.ts 中使用 angular 6 導入的 ngx-international-phone-number 編輯 ngx-international-phone-number 中的國家代碼嗎

Answer 1

您可以將此設置為不可編輯。 我以新加坡國家代碼為例。 我使用過keydown 事件。 並且我正在檢查國家/地區代碼的最后一個位置。所以如果我有國家/地區代碼+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> >>

如果這有幫助，請告訴我！