Question

我正在尝试修改Angular 4的输入框模型，这样如果用户在框中输入23，那么该框应显示23％。

在尝试（输入）或（更改）等事件后，我尝试将%附加到模型值。然而，这完全改变了模型。我想要的是Angular模型变量应该仍然包含23但应该显示23％。

有什么方法可以围绕这个建立一个指令。有任何建议或链接吗？

Answer 1

这有点哈哈，但你可以这样做：

<input #input1 value="{{title}}%" (keydown)=setModel(input1.value)>

在组件中：

title = '23';
setModel(val) {
    this.title = val.split('%').join('');
    console.log(this.title)
};

value="{{title}}%"将获取title值，最后会添加%。您可以使用setModel方法设置新值，但在设置之前，您需要删除所有%个字符，例如：this.title = val.split('%').join('');。

Answer 2

由于您尝试更改组件显示值的方式，因此应使用指令而不是更改模型中的实际值。换句话说，您需要一个输入掩码。您可以使用现有的一个包（例如https://github.com/text-mask/text-mask）或编写自己的指令。

Answer 3

您可以使用2个值创建组件：一个是绑定值，另一个是显示值。该组件看起来有点像这样：

@Component({
  selector: 'hello-world',

  template: `
    <input type="text" [(ngModel)]="display" (keyup)="updateInput($event)" placeholder="Enter a name here">
    <hr>
    <h1>Input: {{input}}</h1>
`
})
export class HelloWorld {

  @Input() input = 0;
  @Output() inputChange = new EventEmitter();
  display;

  ngOnInit() {
    this.display = `${this.input}%`
  }

  updateInput(evt) {
    this.input = this.display.replace(/[^0-9.]/g, "");
    this.display = `${this.input}%`;
    this.inputChange.emit(this.input);
  }
}

你可以像这样绑定到组件：

<hello-world [(input)]="myVar"></hello-world>

修改Angular 4输入框

3 个答案: