Как изменить значение просмотра в Angular? - PullRequest
Новая
       18

Как изменить значение просмотра в Angular?

0 голосов
/ 14 июля 2020

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

Поле ввода: 

<input type="text"
#formItem
[name]="id"
[id]="id"
class="form-control"
[ngModel]="value"
(blur)="change.emit(formItem.value)"
removeDecimals="true" />

Директива: 

import { Directive, ElementRef, Input, OnInit, HostListener, Renderer2 } from '@angular/core';

@Directive({
  selector: '[removeDecimals]'
})

export class RemoveDecimalsDirective implements OnInit {
  @Input() removeDecimals: boolean | undefined;
  private _value : any;
  
  constructor(private el: ElementRef, private renderer2: Renderer2) {
  }

  ngOnInit() {
  }
  
  @HostListener('input') onChange() {
    if(this.removeDecimals) {
      const { value } = this.el.nativeElement;
      this.renderer2.setProperty(this.el.nativeElement, 'value', value.replace(/[^0-9]/g, ''));
    }
  }
}

Итак, попытался добавить что-то подобное в директиву, чтобы удалить, 00 из представления, но это не сработало. 

@HostListener('blur') onBlur() {
    let formatValue = this.el.nativeElement.value;

    const index = formatValue.indexOf(',');
    if (index > -1) {
        formatValue = this.el.nativeElement.value.slice(0, index);
    }

    this.renderer2.setProperty(this.el.nativeElement, 'value', formatValue);
}

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

Как удалить ,00, который добавляется из бэкэнда после размытия в поле ввода?

1 Ответ

1 голос
/ 14 июля 2020

DEMO вы можете использовать нестандартную трубу для вашей модели 

[ngModel]="value | num"

вашу индивидуальную трубу 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'num'
})
export class SafePipe implements PipeTransform {

 
 public transform(value: any) {
    return value.split(",")[0]
  }
}
...