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

时间:2017-08-03 09:21:47

标签: angular input max min

我有一个带有表单的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>

你知道我怎么做吗?

10 个答案:

答案 0 :(得分:20)

我成功使用了表单控件。 这是我的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,则材料设计输入变为红色且该字段未验证。所以之后,如果值不好,我点击保存按钮时就不保存。

答案 1 :(得分:4)

实际上当你使用type =&#34; number&#34;您的输入控件使用向上/向下箭头填充以增加/减少数值,因此当您使用这些按钮更新文本框值时,不会超过100 当您手动提供120/130等输入时,不会验证最大限制,因此您必须按代码验证。< / p>

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

答案 2 :(得分:4)

以下是解决方案:

这是一种破解,但它会起作用

<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>

以下是plunker的链接,请查看。

答案 3 :(得分:1)

我用 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 或您需要执行的任何其他检查。

答案 4 :(得分:0)

只需在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上测试

答案 5 :(得分:0)

您可以编写一条指令来侦听输入上的更改事件,如果该值太小,则将其重置为最小值。 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 模糊的情况下使用此功能,否则,如果第一位数字低于最小值,则用户将无法输入+1位数字。

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

答案 6 :(得分:0)

[我认为读者具有Angular2 +和Forms的基本知识]

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

  1. 在您的“ html”中添加标签:
<input type="number" [min]="0.00" [max]="100.00" [step]="0.01" formControlName="rateFC">
  1. 但是作为Adrien said,用户仍然可以手动输入错误的数字。您可以通过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)])
});
  1. 到目前为止,一切正常,但是最好让用户知道输入错误,然后通过添加您的样式在无效输入元素周围画一条红线:
.form-control.ng-touched.ng-invalid{
    border:2px solid red;
}
  1. 为使其完美,请防止用户提交错误的数据。
<button type="submit" [disabled]="!myFG.valid">Submit</button>

答案 7 :(得分:0)

如果输入在您的范围内,或者不在您分配的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>

答案 8 :(得分:0)

在模板驱动的表单中,用于最小/最大验证而不使用反应式表单和构建任何指令的最简单方法是使用html的pattern属性。这已经被解释并在这里回答请看 https://stackoverflow.com/a/63312336/14069524

答案 9 :(得分:-4)

如果要验证长度,请改用s=df.time.diff().fillna(1).ne(1).cumsum() s.groupby(s).transform('size') Out[396]: 0 3 1 3 2 3 3 2 4 2 5 1 6 1 Name: time, dtype: int32 minLength