angular4 应用程序中输入的最小值和最大值

Question

我有一个带有表单的 angular4 应用程序。在这个中，我有一个输入百分比。所以，我想阻止值在 0 到 100 之间的输入。我尝试添加 min="0" 和 max="100"，但我仍然可以输入大于 100 或小于 0 的数字。

模板

<md-input-container>
  <input type="number" 
    maxlength="3" 
    min="0" 
    max="100" 
    required 
    mdInput 
    placeholder="Charge" 
    [(ngModel)]="rateInput" 
    name="rateInput">
  <md-error>Required field</md-error>
</md-input-container>

你知道我该怎么做吗？

Answer 1

实际上，当您使用 type="number" 时，您的输入控件会填充 up/down 箭头 到 increment/decrement 数值，因此当您更新带有这些按钮的文本框值将不超过 100 的限制，但是当您手动提供输入时120/130 等等，它将无法验证最大限制，因此您必须通过代码验证它。

您可以禁用手动输入，或者您必须在 valueChange/textChange/key* 事件上编写一些代码。

Answer 2

解决方法如下：

这是一种技巧，但它会起作用

<input type="number" 
placeholder="Charge" 
[(ngModel)]="rateInput" 
name="rateInput"
pattern="^$|^([0-9]|[1-9][0-9]|[1][0][0])?"
required 
#rateInput2 = "ngModel">

<div *ngIf="rateInput2.errors && (rateInput2.dirty || rateInput2.touched)"
    <div [hidden]="!rateInput2.errors.pattern">
        Number should be between 0 and 100
    </div>
</div>

这里是link到plunker，请看一下。

Answer 3

我使用表单控件成功了。这是我的 html 代码：

<md-input-container>
    <input type="number" min="0" max="100" required mdInput placeholder="Charge" [(ngModel)]="rateInput" name="rateInput" [formControl]="rateControl">
    <md-error>Please enter a value between 0 and 100</md-error>
</md-input-container>

在我的打字稿代码中，我有：

this.rateControl = new FormControl("", [Validators.max(100), Validators.min(0)])

因此，如果我们输入大于 100 或小于 0 的值，material 设计输入将变为红色并且该字段无效。所以以后，如果数值不好，我点击保存按钮就不保存了。

Answer 4

如果您要验证长度，请改用 minLength 和 maxLength。

Answer 5

只需在 angular2+ 中添加 (onkeypress)

<input type="number" 
    maxlength="3" 
    min="0" 
    max="100" 
    required 
    mdInput 
    placeholder="Charge" 
    [(ngModel)]="rateInput"
    (onkeypress)="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57"
    name="rateInput">

测试于 Angular 7

Answer 6

您可以编写一个指令来侦听输入的更改事件，并在值太低时将其重置为最小值。 StackBlitz

@HostListener('change') onChange() {
  const min = +this.elementRef.nativeElement.getAttribute('min');

  if (this.valueIsLessThanMin(min, +this.elementRef.nativeElement.value)) {
    this.renderer2.setProperty(
      this.elementRef.nativeElement,
      'value',
      min + ''
    );
  }
}

同时监听 ngModelChange 事件以在设置表单值时执行相同的操作。

@HostListener('ngModelChange', ['$event'])
onModelChange(value: number) {
  const min = +this.elementRef.nativeElement.getAttribute('min');
  if (this.valueIsLessThanMin(min, value)) {
    const formControl = this.formControlName
      ? this.formControlName.control
      : this.formControlDirective.control;

    if (formControl) {
      if (formControl.updateOn === 'change') {
        console.warn(
          `minValueDirective: form control ${this.formControlName.name} is set to update on change
          this can cause issues with min update values.`
        );
      }
      formControl.reset(min);
    }
  }
}

完整代码：

import {
  Directive,
  ElementRef,
  HostListener,
  Optional,
  Renderer2,
  Self
} from "@angular/core";
import { FormControlDirective, FormControlName } from "@angular/forms";

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: "input[minValue][min][type=number]"
})
export class MinValueDirective {
  @HostListener("change") onChange() {
    const min = +this.elementRef.nativeElement.getAttribute("min");

    if (this.valueIsLessThanMin(min, +this.elementRef.nativeElement.value)) {
      this.renderer2.setProperty(
        this.elementRef.nativeElement,
        "value",
        min + ""
      );
    }
  }

  // if input is a form control validate on model change
  @HostListener("ngModelChange", ["$event"])
  onModelChange(value: number) {
    const min = +this.elementRef.nativeElement.getAttribute("min");
    if (this.valueIsLessThanMin(min, value)) {
      const formControl = this.formControlName
        ? this.formControlName.control
        : this.formControlDirective.control;

      if (formControl) {
        if (formControl.updateOn === "change") {
          console.warn(
            `minValueDirective: form control ${
              this.formControlName.name
            } is set to update on change
              this can cause issues with min update values.`
          );
        }
        formControl.reset(min);
      }
    }
  }

  constructor(
    private elementRef: ElementRef<HTMLInputElement>,
    private renderer2: Renderer2,
    @Optional() @Self() private formControlName: FormControlName,
    @Optional() @Self() private formControlDirective: FormControlDirective
  ) {}

  private valueIsLessThanMin(min: any, value: number): boolean {
    return typeof min === "number" && value && value < min;
  }
}

确保在表单控件设置为 updateOn blur 时使用此选项，否则如果第一位数字低于最小值。

 this.formGroup = this.formBuilder.group({
    test: [
      null,
      {
        updateOn: 'blur',
        validators: [Validators.min(5)]
      }
    ]
  });

Answer 7

[我假设 reader 具有 Angular2+ 和 Forms 的基本知识]

显示数字输入并设置限制很容易，但您还必须注意预测中可能发生的事情。

在您的 'html':

<input type="number" [min]="0.00" [max]="100.00" [step]="0.01" formControlName="rateFC">

但不如, still user can enter manually a wrong number. You can validate input by Validators容易。在你的 '.ts':

import { FormGroup, FormControl, Validators } from '@angular/forms';

//many other things...

this.myFG = new FormGroup({
   //other form controls...,
   rateFC  : new FormControl(0, [Validators.min(0), Validators.max(100)])
});

到目前为止一切正常，但最好让用户知道输入错误，然后通过添加到您的样式中在无效输入元素周围画一条红线：

.form-control.ng-touched.ng-invalid{
    border:2px solid red;
}

并使其完善，防止用户提交错误的数据。

<button type="submit" [disabled]="!myFG.valid">Submit</button>

Answer 8

如果输入在您的范围内，您可以使用更改事件进行控制，如果它不在您指定的范围内，则为 0。

<md-input-container>
  <input type="number" 
    maxlength="3" 
    min="0" 
    max="100" 
    required 
    mdInput 
    placeholder="Charge" 
    [(ngModel)]="rateInput"
    (change)= "rateInput < 0 ? rateInput = 0 : rateInput; rateInput > 100 ? rateInput = 0 : rateIntput;"
    name="rateInput">
  <md-error>Required field</md-error>
</md-input-container>

Answer 9

在不使用反应式表单和构建任何指令的情况下，模板驱动表单中用于 min/max 验证的最简单方法是使用 html 的模式属性。这已经在这里解释和回答请看

Answer 10

我用 ngModelChange 做了一个解决方法。就我而言，我想避免用户设置的年份早于当年。在html

<div class="col">
      <label>Year<span *ngIf="yearInvalid" class="badge badge-danger ml-1"> Year is invalid</span></label>

      <input class="form-control" type="number" id="year" name="year" #year="ngModel"
      [(ngModel)]="projection.year" required pattern="(?:19|20)[0-9]{2}"
      (ngModelChange)="checkYear($event)" />
</div>

在 angular 中，我只是检查模型更改：

checkYear(e) {
    if (e < new Date().getFullYear()) {
      this.yearInvalid = true;
    }
    else {
      this.yearInvalid = false;
    }
  }

我认为它可以很好地处理 0-100 或您需要做的任何其他检查。

angular4 应用程序中输入的最小值和最大值

Min and max value of input in angular4 application

input

max

min

angular