0

Take a look at this plunkr: https://plnkr.co/edit/xCvnJ9682lV0Z1sBcK68?p=preview (kudos to @yurzui from this question)

It makes sure that anything other than a valid format aren't allowed to be written in the input. There is a slight problem though, and that is if you write different letters quick you can enter things that aren't allowed. Or if just spamming the same letter real quick.

Here is the component:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-input',
  template: '<input [(ngModel)]="model">',
  inputs: [
    'model'
  ],
  host: {
    '(input)': 'isNum($event.target.value)'
  }
})

export class FormNumberInputComponent {
  @Input() model: string;
  @Output('modelChange') onModelChange: EventEmitter<any> = new EventEmitter();

  isNum(value) {  
    const isNumeric = n => n === '-' || !isNaN(parseFloat(n)) && isFinite(n);

    this.onModelChange.emit(isNumeric(value) ? value : new String(value.slice(0, -1)));
  }
}

How can you make sure that Angular keeps up with the changes and don't allow things when writing too fast?

Community
  • 1
  • 1
Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
  • Custom pipe example https://plnkr.co/edit/xCvnJ9682lV0Z1sBcK68?p=preview – yurzui May 14 '16 at 11:17
  • @yurzui That would be the accepted answer. And I'd also like an explanation of why a pipe handles this correctly and why the previous solution doesn't? – Chrillewoodz May 14 '16 at 11:20
  • I applied pure false. I think here you'll find good explanation http://stackoverflow.com/questions/34456430/ngfor-doesnt-update-data-with-pipe-in-angular2?lq=1#answer-34497504 – yurzui May 14 '16 at 11:23
  • @yurzui Thanks, still don't understand why PipeTransform has to be used, it says it's required to create a pipe but I've got like 5 other pipes that doesn't use it and it works just fine.. Do you happen to know? Also post your answer so I can accept it. – Chrillewoodz May 14 '16 at 11:26
  • Could also be https://github.com/angular/angular/issues/7822 – Günter Zöchbauer May 14 '16 at 11:33
  • @yurzui The pipe doesn't seem to play well with the component, because I can't write anything if I use it from inside the component template. – Chrillewoodz May 14 '16 at 12:05
  • @Chrillewoodz Then you can try something like this https://plnkr.co/edit/BgSJFY1D1qydIhCpK76A?p=preview – yurzui May 14 '16 at 12:28
  • @yurzui Seems to be very buggy, it creates e+2420492 and similar stuff when you write weird stuff. The pipe is prefered but I can't get it to work with the component since I need to emit the value from the component but the pipe doesn't like when I emit from the component. Can you get it to emit the value to upper components from the input component by using the pipe or is it just not possible? – Chrillewoodz May 14 '16 at 12:48
  • @Chrillewoodz Is it that what you want? http://plnkr.co/edit/RtSPsza0pZ6yUq1kkNg1?p=preview – yurzui May 14 '16 at 13:27
  • @yurzui Yes! Works great :) Don't see how it's any different from what I tried earlier though hmm... Oh well, thank you again :) – Chrillewoodz May 14 '16 at 13:51

0 Answers0