Question

我需要能够使用逗号将输入中的值格式化为数千。在我这样做之前，请参阅下面的html

<ion-input [ngModel]="myModel | number: '0-0'" (ngModelChange)="update($event)" format-number type="tel"></ion-input>

见ts

  update(value: string) {
    this.myModel = value.replace(/,/g, '');
  }

这个问题是对于每个输入字段，我需要在组件中添加更新方法。我想要的是为此创建一个指令。我已根据以下内容创建了一个。

@Directive({
  selector: '[format-number]', // Attribute selector
})
export class FormatNumbreDirective {

  numberPipe = new DecimalPipe('en-US');
  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
  constructor() {}

  @HostListener('input', ['$event']) oninput(event) {
    const element = event.target as HTMLInputElement;
    let value = element.value.replace(/,/g, '');
    this.ngModelChange.emit(this.numberPipe.transform(value, '.0-0'));
  }
}

html

<ion-input [(ngModel)]="myModel" format-number type="tel"></ion-input>

工作正常。但现在我想用ngModelChange尝试它。但是我收到错误＆＃39;超出最大调用堆栈大小。＆＃39;

见下面的指示

@Directive({
  selector: '[format-number]', // Attribute selector
  host: {
    "(ngModelChange)": 'onInputChange($event)'
  }
})
export class FormatNumbreDirective {

  numberPipe = new DecimalPipe('en-US');
  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
  constructor() {
  }

  onInputChange($event) {
    let value = $event.replace(/,/g, '');
    this.ngModelChange.emit(this.numberPipe.transform(value, '.0-0'));
  }

}

见html

<ion-input [ngModel]="myModel" format-number type="tel"></ion-input>

感谢您的建议

Answer 1

使用此[(ngModel)]="myModel"每次更改值时都会触发

带有ngModelChange的angular自定义指令

1 个答案: