角度4の入力ボックスモデルを変更しようとしています。たとえば、ユーザーが23と入力すると、ボックスには23％が表示されます。角度4の入力ボックスのモデル値を変更する
（入力）または（変更）のようなイベントでアクセスした後、%をモデル値に追加しようとしました。しかし、これはモデルを完全に変更します。私が欲しいのは、Angularモデルの変数にはまだ23が入っていますが、23％が表示されるはずです。
これを回避するための方法はありますか？どんな提案やリンク？
それは少しハック方法ですが、あなたはこれを行うことができます。
<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('');。
コンポーネントの値の表示方法を変更しようとしているので、モデルの実際の値を変更する代わりにディレクティブを使用する必要があります。言い換えれば、ここに入力マスクが必要です。既存のパッケージ（https://github.com/text-mask/text-maskなど）を使用するか、独自の指令を書くことができます。
私はディレクティブを使ってこれを達成しなければならないことは知っていますが、問題はAngularモデルを操作する方法です。 AngularJSのngModelCtrlなどの代替手段はありますか –
リアクティブフォームAPIを使用すると、明示的にモデルオブジェクトを作成することができます。 formModel： 'FormGroup = new FormGroup（...）;'モデルに追加するフォームフィールドを指定します。次に、モデルの特定のフィールドに値を代入するだけです： 'this.myFormModel.value.customer =" Mary ";' –
2つの値を持つコンポーネントを作成できます.1つはバインドされた値で、もう1つは表示された値です。
@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);
}
}
そして、あなたはそうのようなコンポーネントにバインドすることができます：コンポーネントは少し、このようになります。私もこの絵でngModelを望む
<hello-world [(input)]="myVar"></hello-world>
、私の入力ボックスの数が動的になりますだってpopulated –
'value'属性はここでも同じことをしています。' title'値を表示しています。タイトル値は 'keydown'イベントで更新しています。これは実際には 'ngModel'と同じことです –