Angular 6自定义输入组件

我已经input在Angular 6中创建了一个自定义组件。此输入组件可以是typetextnumber如果是数字,则需要验证minmax值。

验证有效,但输入的值不会第二次更新。模型将更新。

该组件如下所示:

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

那是关于的变更事件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);
  }

那是我的全部 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);
    }
}

为什么输入值没有更新?模型正确更新。如果我调试代码,我看到的this.value是预期的值,但在DOM中不是。

在此处输入图片说明

上图显示红色圆圈中的值也应在输入值中。如您所见,模型是正确的,但是输入值未更新。

奥古斯丁河

替换[value]ngModel

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

Stackblitz示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章