Angular 6 custom Input component

Question

I have created a custom input component in Angular 6. This input component can be either of type text or number. If it's a number, I need to validate for min and max values.

The validation works, but the value of the input does not get updated on the second time. The model updates tho.

The component looks like that:

<input [type]="type" [min]="min" [max]="max" (keyup)="change($event.target.value)" [value]="value">

That is ma change event on keypress:

change(value: any): void {
    if (this.max) {
      if (value > this.max) {
        this.value = this.max;
        this.valueChange.emit(this.value);
        return;
      }
    }

    if (this.min) {
      if (value < this.min) {
        this.value = this.min;
        this.valueChange.emit(this.value);
        return;
      }
    }

    this.value = value;
    this.valueChange.emit(this.value);
  }

That is my complete InputComponent

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

@Component({
    selector: 'app-custom-input',
    templateUrl: 'input.component.html',
    styleUrls: ['./input.component.scss']
})
export class InputComponent implements OnInit {
    @Output() valueChange = new EventEmitter();

    @Input() value: any = null;
    @Input() type = 'text';
    @Input() min: number;
    @Input() max: number;

    constructor() {}

    ngOnInit() {}

    change(value: any): void {
      if (this.max) {
        if (value > this.max) {
          this.value = this.max;
          this.valueChange.emit(this.value);
          return;
        }
      }

      if (this.min) {
        if (value < this.min) {
          this.value = this.min;
          this.valueChange.emit(this.value);
          return;
        }
      }

      this.value = value;
      this.valueChange.emit(this.value);
    }
}

Why is the input value not being updated? The model updates properly. If I debug the code I see that this.value is the value expected, but in the DOM it's not.

The image above shows the value in red circle should also be in the input value. As you can see, the model is correct, but the input value is not updating.

Augustin R · Accepted Answer · 2018-08-20 12:58:37Z

3

Replace [value] by a ngModel :

<input [type]="type" [min]="min" [max]="max" (keyup)="change($event.target.value)" [(ngModel)]="value">

Stackblitz example

answered Aug 20, 2018 at 12:58

Augustin R

7,8593 gold badges30 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

Angular 6 custom Input component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related