Angular 5, форматирование и анализ ввода, что является стандартным решением

Question

У меня есть поле ввода и я хочу ввести число с плавающей запятой, используя немецкий язык.Мое решение следующее, оно работает, но это сложно и должен быть лучший подход?

<input matInput [ngModel]="amount | number: '0.2-2'" 
(blur)="transformAmount($event)" (keyup.enter)="transformAmount($event)"/>

transformAmount(event) {
  console.log(event.target.value);
  this.amount = parseFloat(event.target.value.replace('.', '').replace(',','.'));
  console.log('amount=' + this.amount);
}

Answer 1

Да, эта часть немного сложнее.Кроме того, иногда вам нужно отобразить что-то, что не соответствует действительности.

Фактически лучшее решение, которое я нашел, - это создание собственного компонента (работающего с ngModel, см. О ControlValueAccessor) для моего ввода, и он выглядит как основа того, что вы пытаетесь сделать.

html:

<input [formControl]="inputFormControl" #myInput />

ts:

@ViewChild('myInput') inputElm: ElementRef;
formGroup: FormGroup;
value: number;

this.inputFormControl.valueChanges.subscribe((value: string) => {
  if (value) {
    const displayValue = ('' + value).replace(',', '.');
    this.value = parseFloat(displayValue); // manage the value
    this.inputFormControl.setValue(this.value, { emitEvent: false });
    this.inputElm.nativeElement.value = new DecimalPipe(this.localId).transform(displayValue, '0.2-2'); //control the display
  }
});

В каком-то смысле вы наверняка найдете его немного сложнее, но в конце это даст вам также больше контроля;)

Answer 2

Я создал директиву, используя информацию из этой Angular 2 директивы для форматирования текста при вводе статьи .

Это работает, но я не понимаю, почему суффикс «Изменить» необходим и почему я не могу отделить событие от строки ввода, это: (appNumberInput) = .... [appNumberInput] =....

<input [(appNumberInput)]="amount" format="0.2-2" />

@Directive({
    selector: '[appNumberInput]',

})
export class NumberInputDirective implements OnInit {

    @Input()
    appNumberInput: any;

    @Input()
    format: string;

    @HostBinding('value')
    stringValue: string;


    @Output() appNumberInputChange: EventEmitter = new EventEmitter();

    constructor(private decimalPipe: DecimalPipe) {
    }

    ngOnInit() {
      this.stringValue = this.decimalPipe.transform(this.appNumberInput, this.format);
    }

    @HostListener('blue', ['$event.target.value'])
    @HostListener('keyup.enter', ['$event.target.value'])
    formatANumber(value) {
        const numberValue = parseFloat(value.replace('.', '').replace(',', '.'));
        this.stringValue = this.decimalPipe.transform(numberValue, this.format);
        this.appNumberInputChange.next(numberValue);

  }
}

Answer 3

Ваш подход в порядке.

Нет лучшего способа преобразования данных из переменной в input, чем Pipe, и нет лучшего способа преобразования данных из input в переменную, чем функцияпривязанный к событиям DOM.

Чтобы немного упростить ваш код, вы можете сделать следующее:

<input matInput [ngModel]="amount | number: '0.2-2'" (ngModelChange)="transformAmount($event)"/>

transformAmount(event) {
  console.log(event);
  this.amount = parseFloat(event.replace('.', '').replace(',','.'));
  console.log('amount=' + this.amount);
}