Question

我正在尝试使用类型编号创建组件输入，您可以在其中使用Angular设置最大值和最小值

这是我的代码：这是称为组件的HTML代码：

<app-input-number [(value)]="inputMinMaxValueNumber" [min]="min" [max]="max"></app-input-number>

这是组件的HTML代码：

<input class="gh-input" type="number" [max]="max" [min]="min" [name]="name"  
[readonly]="readonly" [disabled]="disabled" [ngClass]="disabled ? 'disabled' : ''" [value]="value" />

以及该组件的打字稿：

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

@Component({
  selector: 'app-input-number',
  templateUrl: './input-number.component.html',
  styleUrls: ['./input-number.component.scss']
})
export class InputNumberComponent implements OnInit {

  @Input() name: String;
  @Input() readonly: Boolean;
  @Input() disabled: Boolean;
  @Input() max: number;
  @Input() min: number;
  currentValue: number;

  @Output()
  valueChange = new EventEmitter<number>();

  @Input()
  get value() {
    return this.currentValue;
  }

  set value(val) {
    if (val > this.max) {
      this.currentValue = this.max;
    } else if (val < this.min) {
      this.currentValue = this.min;
    } else {
      this.currentValue = val;
    }

    this.valueChange.emit(this.currentValue);
  }

  constructor(private translateService: TranslateService) { }

  ngOnInit() {
  }
}

问题是，当我通过输入一个高于最大值的值来手动输入一个值时，它将第一次工作，但随后将不再限制该值（它适用于最小值）< / p>

任何帮助都将受到欢迎。

Answer 1

该方法不起作用，因为您无法通过value属性与input元素进行双向绑定。请改用ngModel。

无论如何，最糟糕的选择是使用ngModel，或者通常是双向绑定。而是使用带有自定义验证程序的FormGroups。

直接输入文字时管理输入[number]中的最大值和最小值

1 个答案: