[英]Angular 7 Input Mask for phone number
我正在嘗試編寫代碼輸入掩碼來格式化電話號碼,如 (123) 456-7890。 我差不多完成了。
我創建了指令來執行格式,但我堅持粘貼操作。
如果用戶在文本框中鍵入電話號碼,則其工作正常。
但是,如果用戶將 10 位電話號碼復制並粘貼到文本框中,則格式僅在文本框中發生,而不會反映在模型綁定中。
文本框顯示 -> (123) 456-7890 但在 ngModel 中綁定是 1234567890
StackBlitz 中的實際代碼
https://stackblitz.com/edit/angular-648zrp
代碼
html模板
<form #myForm="ngForm">
<div>
<span>Copy and paste the below text in textbox </span>
<br>
<br>
<span>1234567890</span>
</div>
<hr>
<br>
<div>
<input name="phoneNumber" id="phoneNumber" class="form-control" phone autocomplete="off"
maxlength="14" (blur)="onSubmit()" [(ngModel)]="phoneNumber"/>
<br/>
<br/>
<span>PhoneNumber NgModel Bind : {{phoneNumber}}</span>
<br/>
<br/>
<span *ngIf="myForm?.controls?.phoneNumber">PhoneNumber form value : {{myForm.controls.phoneNumber.value}}</span>
</div>
</form>
成分
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
phoneNumber: string;
}
指示
import { Directive } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[ngModel][phone]',
host: {
'(ngModelChange)': 'onInputChange($event)'
}
})
export class MaskDirective {
constructor(public model: NgControl) {}
onInputChange(value) {
var x = value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
this.model.valueAccessor.writeValue(value);
}
}
請嘗試@HostListener
@HostListener('paste',['$event']) onEvent($event) {}
這是我最近寫的代碼。 它不僅會驗證電話模式,還會在您輸入數字時自動添加括號和破折號
public isValidFlg:boolean = true;
validatePhoneNo(field) {
var phoneNumDigits = field.value.replace(/\D/g, '');
this.isValidFlg = (phoneNumDigits.length==0 || phoneNumDigits.length == 10);
var formattedNumber = phoneNumDigits;
if (phoneNumDigits.length >= 6)
formattedNumber = '(' + phoneNumDigits.substring(0, 3) + ') ' + phoneNumDigits.substring(3, 6) + '-' + phoneNumDigits.substring(6);
else if (phoneNumDigits.length >= 3)
formattedNumber = '(' + phoneNumDigits.substring(0, 3) + ') ' + phoneNumDigits.substring(3);
field.value = formattedNumber;
}
和輸入:
<input type="text" (input)="validatePhoneNo($event.target)" placeholder="(___) ___-____">
<div *ngIf="!isValidFlg">Invalid Format"</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.