修改Angular 4输入框的model值答案

【问题标题】：Modifying the model value of Angular 4 input box修改Angular 4输入框的model值
【发布时间】：2018-03-12 15:50:45
【问题描述】：

我正在尝试修改 Angular 4 的输入框模型，如果用户在框中输入 23，则该框应显示 23%。

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

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

【问题讨论】：

标签： javascript angular angular2-directives

【解决方案1】：

您可以创建具有 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>

【讨论】：

【解决方案2】：

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

【讨论】：

我知道我必须使用指令来实现这一点，但问题是如何操作 Angular 模型。 AngularJS中的ngModelCtrl之类的东西有什么替代方法
使用响应式表单 API，您可以显式创建模型对象，例如formModel：FormGroup = new FormGroup(...); 指定要添加到模型的表单字段。然后，您可以为模型上的特定字段分配一个值：this.myFormModel.value.customer = "Mary";

【解决方案3】：

这有点老套，但你可以这样做：

<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('');。

【讨论】：

我还想要这张图片中的 ngModel，因为我的输入框很少会被动态填充
value 属性在这里做同样的事情，它显示title 值，并且标题值在keydown 事件上更新。它实际上与ngModel 做同样的事情