Angular 2 - 在将输入存储到模型之前转换输入的指令（例如显示 1 但存储 1000）

Question

我正在尝试编写一个显示值的指令除了底层的 ngModel。

例如：用户在输入字段中输入并看到 1，但模型存储 1000。

有没有办法在 displaying/writing 之前转换一个值？

编辑：

在 angular 1 中有 ngModelCtrl.$formatters.push(function() {...}); 和 ngModelCtrl.$parsers.push(function() {...});。基本上是一种以两种方式添加转换的方法。

Answer 1

我会制定一个指令来实现这一点，

工作演示：https://plnkr.co/edit/Uf5BmI2r4RqufFB568x2?p=preview

<input type="text"  [(ngModel)]="model">

import { Directive, ElementRef, Renderer,Input,Output,EventEmitter } from '@angular/core';

@Directive({ selector: '[ngModel]' })

export class directive {
  @Input() ngModel;
  ngOnChanges(val:SimpleChanges){

    if(val['ngModel'].currentValue!=undefined)
    console.log(+val['ngModel'].currentValue*1000);
  }
}

Answer 2

我找到了一个方法：

<input [ngModel]="(x * 1000)" (change)="x = ($event.target.value / 1000)"

这样，如果模型值为 1，用户看到的值为 1000。更改时，模型值将相应更新。

Angular 2 - 在将输入存储到模型之前转换输入的指令（例如显示 1 但存储 1000）

Angular 2 - Directive to transform input before storing it in the model (e.g. show 1 but store 1000)

angular2-directives

angular