我们可以阻止用户在 appmodule.ts 中使用 angular 6 导入的 ngx-international-phone-number 编辑 ngx-international-phone-number 中的国家代码吗
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);
}
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.