ng-zorro-mobile中使用InputItem组件设置type=money时,持续执行失焦事件
ng-zorro-mobile中使用InputItem组件设置type=money时,持续执行失焦事件;
程序是在Angular8以及Ionic5的框架下执行的,我是用angular组件又封装了一下使用的,一开始尝试换了下type,试过其他的type,如text,number等都没有出现这个问题,后来我试了单独只放这个组件,点击空白处还是会持续执行失焦事件。
相关代码
ts文件
import { Component, OnInit, ElementRef } from '@angular/core';
import { ToastService } from 'ng-zorro-antd-mobile';
@Component({
selector: 'app-lgInputItem',
templateUrl: './lgInputItem.component.html',
styleUrls: ['./lgInputItem.component.css']
})
export class LgInputItemComponent implements OnInit {
/*
* type:string 输入框类型 {
* 'text'(默认): 文字
* 'bankCard': 银行卡
* 'phone': 手机号(此时最大长度固定为11,maxLength设置无效)
* 'password': 密码
* 'number': 数字
* 'digit': 数字(表示原生的 number 类型);
* 'money': 货币
* 其他标准 html input type 类型
* }
*/
options = {
name: '标题名称',
type: 'phone',
value: '',
defaultValue: '', // 设置初始默认值
placeholder: '请输入值', // 占位符
editable: true, // 是否可编辑,默认true
disabled: false, // 是否禁用,默认false
clear: false, // 是否带清除功能(仅editable为true,disabled为false才生效),默认false
maxLength: undefined, // 最大长度(选用)
error: false, // 报错样式,默认false
extra: '注释', // 右边注释(选用)
labelNumber: 5, // 标签的文字个数,可用2-7之间的数字,默认5
updatePlaceholder: false, // 当清除内容时,是否将清除前的内容替换到 placeholder 中,默认false
prefixListCls: 'am-list', // 列表 className 前缀,默认'am-list'
moneyKeyboardAlign: 'left' // 文字排版起始方向, 只有 type='money' 支持, 可选为 'left', 'right',默认'right'
};
/*
* 控制焦点
*/
useFocus = {
focus: false,
date: new Date()
};
constructor(private toast: ToastService, private el: ElementRef) { }
// change 事件触发的回调函数
inputChange(e: any) {
console.log(e);
const value = e.replace(/\s/g, '');
if (value.length < 11 && value.length > 0) {
this.options.error = true;
} else {
this.options.error = false;
}
this.options.value = e;
}
// blur 事件触发的回调函数
inputBlur() {
console.log('失去焦点');
}
// focus 事件触发的回调函数
inputFocus() {
console.log('获得焦点');
}
// 点击报错 icon 触发的回调函数
inputErrorClick() {
ToastService.info('Please enter 11 digits');
}
// extra 点击事件触发的回调函数
inputExtraClick() {
console.log('点击注释');
}
ngOnInit() {
switch (this.options.type) {
case 'phone':
this.options.maxLength = 13;
this.options.placeholder = 'XXX XXXX XXXX';
break;
case 'bankCard':
this.options.maxLength = 19;
this.options.placeholder = '8888 8888 8888 8888';
break;
default:
break;
}
}
}
HTML文件
<InputItem [type]="options.type" [(ngModel)]="options.value" *ngIf="options.display"
[placeholder]="options.placeholder" [editable]="options.editable" [disabled]="options.disabled"
[clear]="options.clear" [maxLength]="options.maxLength" [error]="options.error" [extra]="options.extra"
[labelNumber]="options.labelNumber" [updatePlaceholder]="options.updatePlaceholder" [focus]="useFocus"
[moneyKeyboardAlign]="options.moneyKeyboardAlign" (onChange)="inputChange($event)" (onBlur)="inputBlur()"
(onFocus)="inputFocus()" (onErrorClick)="inputErrorClick($event)" (onExtraClick)="inputExtraClick()"
max="100">
{{options.name}}
</InputItem>
希望大神能帮忙分析下什么原因,主要是不报错,没法找原因,有什么方法可以阻止它持续执行失焦么?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论