Angular - two way data binding from @Input not working

Question

I'm trying to implement a custom input that accepts only numeric values by reseting the rest to 0, using the following code for the input component:

import {Component, Input, Output, ElementRef, EventEmitter} from '@angular/core';
import {Observable} from 'rxjs/Rx';

@Component({
    selector: 'debounce-input',
    template: '<input type="text" [placeholder]="placeholder" [(ngModel)]="_v">'
})
export class DebounceInputComponent {
    @Input() placeholder: string
    @Input() delay: number = 300

    _v: string

    @Input()
    get v(): string {
        return this._v
    }

    set v(_value) {
        this._v = _value
        this.valueChange.emit(this.v)
    }

    @Output() valueChange: EventEmitter<any> = new EventEmitter<any>()

    @Output() value: EventEmitter<any> = new EventEmitter<any>()

    constructor(private elementRef: ElementRef) {
        const eventStream = Observable.fromEvent(elementRef.nativeElement, 'keyup')
            .map(() => this.v)
            .debounceTime(this.delay)
            .distinctUntilChanged()
        eventStream.subscribe((obj) => this.value.emit({v: this.v}))
    }
}

The component above is imported within AppComponent using the following code:

HTML part:

<div style="text-align:center">
  <debounce-input [v]="mynumber"
  delay="1000"
  placeholder="Type something..."
  (value)="handle($event)">
  </debounce-input>
</div>

TypeScript part:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  mynumber = 0

  handle(obj) {
    console.log(obj.v)
    if (isNaN(Number(obj.v))) {
      console.log('trying to reset invalid input to 0')
      this.mynumber = 0
    }
  }}

The problem is whenever I type a non-numeric value, the AppComponent fails to reset the input to 0, although the "trying to reset invalid input to 0" message gets shown within the console.

What is the cause of this behavior?

what is the value of console.log(obj.v) ? did you try with obj.target.value? — Niladri
– Niladri, Commented Feb 15, 2018 at 10:54
@Niladri It's the same as any value I type in the input component. — user6039980
– user6039980, Commented Feb 15, 2018 at 10:56
do you think you could set up a stackblitz for us to play with you code? — Boris Lobanov
– Boris Lobanov, Commented Feb 15, 2018 at 10:57
@BorisLobanov I tried to do so, but stackblitz failed to detect the component I added. — user6039980
– user6039980, Commented Feb 15, 2018 at 11:01
Whats the issue the question explanation is to confusing?? Do you want to restrict users for your input fields as type="number" or say type="text" — mayur
– mayur, Commented Feb 15, 2018 at 11:02

Boris Lobanov · Accepted Answer · 2018-02-15 11:34:52Z

1

I figured it out. You @Input value was not changed because mynumber in the parent was not changing from the child changes. I added this functionality and it worked:

handle(obj) {
    console.log(obj.v)
    if (isNaN(Number(obj.v))) {
      console.log('trying to reset invalid input to 0')
      this.mynumber = 0;
    } else {
      this.mynumber = obj.v; // add this line
    }
  }

P.S. I'd still, however, consider restricting your input to numeric type only and adding some filter to prevent setting numbers like '0123'.

answered Feb 15, 2018 at 11:34

Boris Lobanov

2,4541 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user6039980 Over a year ago

I updated the code as you mentioned, but I am still getting the same problem - the input doesn't get reset to 0 after typing 'a'.

Boris Lobanov Over a year ago

stackblitz.com/edit/angular-kscfaw works for me. have a look, maybe there's something you are missing?

Boris Lobanov Over a year ago

I don't understand

Boris Lobanov Over a year ago

I think the delay is causing the problem. If you type 1, then give it a second, then type 'a' it works correctly

baha almomani · Accepted Answer · 2018-02-15 11:22:25Z

modify the setter in your input component, and make ngModel pointing to the v instead of _v.

  import {Component, Input, Output, ElementRef, EventEmitter} from '@angular/core';
  import {Observable} from 'rxjs/Rx';

  @Component({
      selector: 'debounce-input',
      template: '<input type="text" [placeholder]="placeholder" [(ngModel)]="v">'
  })
  export class DebounceInputComponent {
      @Input() placeholder: string
      @Input() delay: number = 300

      _v: string

      @Input()
      get v(): string {
          return this._v
      }

      set v(_value) {
        if (isNaN(Number(_value))) {
          console.log('trying to reset invalid input to 0')
          this._v = '0';
          return;
        }
          this._v = _value
          this.valueChange.emit(this.v)
      }

      @Output() valueChange: EventEmitter<any> = new EventEmitter<any>()

      @Output() value: EventEmitter<any> = new EventEmitter<any>()

      constructor(private elementRef: ElementRef) {
          const eventStream = Observable.fromEvent(elementRef.nativeElement, 'keyup')
              .map(() => this.v)
              .debounceTime(this.delay)
              .distinctUntilChanged()
          eventStream.subscribe((obj) => this.value.emit({v: this.v}))
      }
  }

Collectives™ on Stack Overflow

Angular - two way data binding from @Input not working

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related