Как держать формат в поле зрения, а не в модели? (Угловой 5)

Я делаю специальный компонент с поддержкой директивы [(ngModel)], и он отлично работает. Проблема в том, что я хочу сохранить формат валюты в представлении и сохранить «нормальное» число в модели, возможно ли это для двусторонней привязки данных в Angular 5?

вот код: https://stackblitz.com/edit/angular-c1qxh4

Вы заметите некоторые вещи:

  • при загрузке вроде все нормально, только вид имеет формат
  • когда вы добавляете, скажем, еще 2 нуля, формат также переходит в модель (это то, чего я хочу избежать)
  • формат в модели неправильный (запятые расставлены неправильно, но это не важно, формат там все равно не нужен)

Тогда у меня будет вопрос: можно ли сделать то, что я хочу? Если да, то что я делаю не так?

РЕДАКТИРОВАТЬ: Для пояснения я не хочу делать это для двух отдельных компонентов (например, ввода и метки или ввода и невидимого ввода поверх него (я уже пробовал это)), я хочу знать, есть ли способ сделать это на одном входе.


angular ngmodel
person Community    schedule 18.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен, что понял, что именно вам нужно, но в моем случае я обычно использую функцию ввода валюты или просмотра, как показано ниже:

component.ts

public price;

  addCommas(number) {

    let nStr;

    if(typeof number == 'string'){
      nStr = number;
    }else if(typeof number == 'number'){
      nStr = number.toString();
    }else{
      // console.error("ERROR addCommas() : ", number);
      return;
    }
    nStr += '';
    let x = nStr.split('.');
    let x1 = x[0];
    let x2 = x.length > 1 ? '.' + x[1] : '';
    let rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
  }

component.html

<div>
  <app-money-input [(ngModel)]="price"></app-money-input>
  ${{addCommas(price)}}   //price is not changed. but transformed when it is rendered.
</div>

Тогда вам не нужно изменять ценовую переменную. только шаблон представления изменяет формат с помощью функции addCommas при его визуализации.

Надеюсь, это будет вам полезно :)

Я добавил функции формата input NgModel convert.

  1. определите ngModel с помощью переменной priceString.

  2. определить функцию преобразования, которая сохраняет исходное значение в ценовую переменную. и преобразуйте формат $ и запятую и сохраните его в переменной pricsString.

  3. привязка события keyup для ввода

  4. использовать цену (исходное значение без формата) в качестве вывода

*.ts :

convertPrice(event:any){
    this.price = this.priceString.replace(/,/gi, "");
    this.priceString = this.price.split(/(?=(?:\d{3})+$)/).join(",");
    console.log(this.priceString);
  }

* .html

<input type="text" class="form-control input-sm" id="Price"
       required
       (keyup)="convertPrice($event)"
       [(ngModel)]="priceString"
       placeholder="please enter price">
person Jihoon Kwon    schedule 18.04.2018
comment
Он не хочет этого. Он хочет, чтобы модель оставалась такой же, как 15 000, что является числом, в то время как входные данные показывают 15 000 долларов, что является строкой. Ему нужна какая-то оболочка вокруг значения ngModel внутри компонента ввода денег. - person Semir Deljić; 19.04.2018
comment
@ SemirDeljić Да, это код. Ценовая переменная может иметь значение 15000 (строка или число). а также цену можно использовать в качестве входных данных дочернего компонента без каких-либо изменений значения. - person Jihoon Kwon; 19.04.2018
comment
@JihoonKwon Я хочу делать то, что вы делаете, но все внутри ввода, а не на отдельной метке (см. Ссылку на мой код, и вы поймете) - person ; 19.04.2018
comment
@Gustavo Я добавил еще один вариант для функции преобразования ngModel :) - person Jihoon Kwon; 19.04.2018
comment
@JihoonKwon, спасибо за это, но я не думаю, что вы полностью понимаете, что я хочу (вы видели мой код?), Мне нужна только одна переменная в качестве ngModel (та же переменная должна быть валютой в представлении и числом в модели ) - person ; 19.04.2018