ionic4 - 无法以角度反应形式执行信用卡格式化
问题描述
我正在尝试执行信用卡验证器,即在每四位数字之后添加空格,例如 1111 1111 1111 1111。但不知何故,我无法完成工作。
这是我尝试过的。
先感谢您
html
<ion-item>
<ion-label position="floating">Card number</ion-label>
<ion-input type ="tel" formControlName = "cardnumber" keypress ="cc_format($evet)" ></ion-input>
</ion-item>
ts
cc_format(value) {
var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
var matches = v.match(/\d{4,16}/g);
var match = matches && matches[0] || ''
var parts = []
for (let i=0, len=match.length; i<len; i+=4) {
parts.push(match.substring(i, i+4))
}
if (parts.length > 0) {
return parts.join(' ')
} else {
return value
}
}
解决方案
首先让我们使用ionChange
从您的输入中获取更改的值。将您的输入与creditCardNumber
ts 文件中定义的连接。现在转换信用卡号并将其添加到动态变量中。
<ion-item>
<ion-label position="floating">Card number</ion-label>
<ion-input type ="tel" formControlName="cardnumber" (ionChange)="cc_format($event.target.value)" [(ngModel)]="creditCardNumber"></ion-input>
</ion-item>
creditCardNumber: string;
cc_format(value: string) {
const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
const matches = v.match(/\d{4,16}/g);
const match = (matches && matches[0]) || '';
const parts = [];
for (let i = 0, len = match.length; i < len; i += 4) {
parts.push(match.substring(i, i + 4));
}
if (parts.length > 0) {
this.creditCardNumber = parts.join(' ');
} else {
this.creditCardNumber = value;
}
}