Как добавить пользовательский текст в ngModel в угловых 6?

Question

У меня есть такой код.

<input type="text" class="form-control" [(ngModel)]="rate" formControlName="rate">

Это отлично работает.

Пытались

1) Я просто хочу добавить % с помощью ngModel. Я пытался использовать его с тегом <span>, но столкнулся с проблемой css.

2) [(ngModel)]="rate + '%'"
Got syntax error.

3) Из .ts file:

{rate: ${0}%} // Получил NaN значение в HTML

Answer 1

используйте этот способ.

  <label >{{rate}}%</label>

Answer 2

Вы можете достичь по следующему коду:

/*in your ts file*/

public changeRate(e){
  if(this.name != ''){
    if (this.name[this.name.length - 1] != "%"){
      this.name += '%';
      console.log(this.name);
    }
  }
}

<input type="text" class="form-control" (change)="changeRate()" [(ngModel)]="rate" value="{{name}}" formControlName="rate">