ng-zorro-mobile中使用InputItem组件设置type=money时,持续执行失焦事件

发布于 2022-09-11 21:54:20 字数 3618 浏览 32 评论 0

ng-zorro-mobile中使用InputItem组件设置type=money时,持续执行失焦事件;

图片描述

程序是在Angular8以及Ionic5的框架下执行的,我是用angular组件又封装了一下使用的,一开始尝试换了下type,试过其他的type,如text,number等都没有出现这个问题,后来我试了单独只放这个组件,点击空白处还是会持续执行失焦事件。

clipboard.png

相关代码

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文