Angular中ControlValueAccessor的用法实例

以下代码是使用Angular中的ControlValueAccessor去重新定义input的输入值。

最终效果
将数字格式化成金额表示,[1234567] => [1,234,567]

html代码:

<input type="text" appMoneyInput [formControl]="money">

component.ts代码:

money: FormControl;

constructor(
  private fb: FormBuilder
) {}

ngOnInit(): void {
  this.money = this.fb.control('');
}

money-input.directive.ts代码:

import { Directive, ElementRef, HostListener, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

@Directive({
  selector: '[appMoneyInput]',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return MoneyInputDirective; }),
    multi: true,
  }]
})
export class MoneyInputDirective implements ControlValueAccessor {

  private onModelChange = (_) => { };

  constructor(private elementRef: ElementRef) { }

  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
    value = this.formatNumber(value);
    this.elementRef.nativeElement.value = value;
    this.onModelChange(value);
  }

  writeValue(obj: any): void {
    obj = this.formatNumber(obj);
    this.onModelChange(obj);
  }
  registerOnChange(fn: any): void {
    this.onModelChange = fn;
  }
  registerOnTouched(fn: any): void {

  }
  setDisabledState?(isDisabled: boolean): void {

  }

  formatNumber(value: string): string {
    value = value.replace(/,/g, '');
    let result = '';
    let charCount = 0;
    for (let i = value.length - 1; i >= 0; i--) {
      if (/[0-9]/.test(value.charAt(i))) {
        if (charCount === 3) {
          result = ',' + result;
          charCount = 0;
        }
        result = value.charAt(i) + result;
        charCount++;
      }
    }
    return result;
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值