Блог

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

Десятичные числа разделяются запятой, но может быть случай, когда пользователь будет использовать точку в качестве разделителя, и в этом случае я должен заменить точку на запятую при вводе.

Я пытался следующим образом архивировать его:

 @Directive({
  selector: '[appQuantity]',
})
export class QuantityDirective {
  @Input()
  public plu: Plu;

  constructor(private ref: ElementRef) {}

  @HostListener('input', ['$event'])
  public onInput(event: any): void {
    const val = this.ref.nativeElement.value;

    this.ref.nativeElement.value = this.ref.nativeElement.value.replace(/./g, ','); // here i should replace dot with comma but it's not working
    if (this.plu.um === 'PZ'){ // controls if input is empty i'm setting 1
      if (!val || val <= 0){
        this.ref.nativeElement.value = 1;
      }
    }
    this.plu.qta = parseFloat(this.ref.nativeElement.value); // setting the object quantity to inserted value
  }
}
  

Но он просто возвращает значение NaN в parseFloat и просто устанавливает для ввода значение 1…

Согласно документам для parseFloat: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

 Return value
A floating point number parsed from the given string.

Or NaN when the first non-whitespace character cannot be converted to a number.
  

Parsefloat ожидает строку 000.00 , но поскольку вы заменяете . на a , , вы получаете NaN.

Я бы рекомендовал сначала проанализировать число, затем преобразовать в ваш вывод и установить только после того, как вы будете довольны значением, а не сбрасывать одно и то же значение несколько раз.

 @Directive({
  selector: '[appQuantity]',
})
export class QuantityDirective {
  @Input()
  public plu: Plu;

  constructor(private ref: ElementRef) {}

  @HostListener('input', ['$event'])
  public onInput(event: any): void {
    // Use `let` instead of rewriting the value constantly (weird side effects on ui if you keep setting the value)
    let val = this.ref.nativeElement.value;

    // Convert `,` to `.` to allow for valid parsing
    val = parseFloat( val.replace(/,/g, '.'))
    if (this.plu.um === 'PZ'){ // controls if input is empty i'm setting 1
    // Now that `val` is a number, `<= 0` is valid because it should not be used on strings
      if (!val || val <= 0){
        val = 1;
      }
    }

    // Format as needed
    const correctFormat = val.toString().replace(/./g, ',')
    // Set now
    this.ref.nativeElement.value = correctFormat
    this.plu.qta= correctFormat; // setting the object quantity to inserted value
  }
}
  

Просто совет

Если вас беспокоят числовые форматы, вы можете использовать toLocaleString и другие встроенные средства форматирования чисел, которые могут обрабатывать такие вещи, как валюта и язык.