限制html中输入字段的最大值答案

【问题标题】：Limit max value of input field in html限制html中输入字段的最大值
【发布时间】：2018-12-31 09:02:35
【问题描述】：

如何限制用户输入大于 order.leftToFulfill 的值？

  <input  class="table-input" type="number" name="check"  [(ngModel)]="tempFulfill" matInput min="1" max="{{order.leftToFulfill}}" oninput="this.value = Math.abs(this.value)">

我要做的是：例如如果 order.leftToFulfill=50 比我必须限制用户输入大于 50 的值。

【问题讨论】：

input 的max 参数不限制用户输入大于max 的数字，它只是将表单置于用户无法提交的状态，如果max 标准的计算结果为 false。
使用maxlength属性。不是max
相关：Limit input box to 0-100。和Min and max value of input in angular4 application 可能会帮助你
为什么你不使用 ReactiveForms？在那里实现“输入验证”要简单得多。如果您自己实施，那么我会选择“管道”
如果你不想使用 javascript，你可能也不会使用 Angular。真的，如果您选择使用框架，请使用它的功能或离开它。

标签： angular angular6

【解决方案1】：

检查以下Stackblitz Demo

HTML：

<input type="text" [maxLength]="maxLength" [ngModel]="value" (ngModelChange)='up($event)'/>

app.component.ts：

import { Component, Injectable } from '@angular/core';

@Injectable()
export class MyService {

  MAXLENGTH = 2;

  getMaxLength() {
    return this.MAXLENGTH;
  }

}


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 4';
  maxLength: number;
  value = 0;
  constructor(private myService: MyService) {
    this.maxLength = myService.getMaxLength();
  }
  up(newValue) {
    console.log(newValue);
    if (newValue < 0) {
      this.value = 0;
    } else if (newValue > 50) {
      this.value = 50;
    } else {
      this.value = newValue;
    }
  }
}

解释：

MAXLENGTH = 2;

 getMaxLength() {
    return this.MAXLENGTH;
 }

用于将输入长度限制为x，例如 x=2。

核心到极限值：

 up(newValue) {
    if (newValue < 0) {
      this.value = 0;
    } else if (newValue > 50) {
      this.value = 50;
    } else {
      this.value = newValue;
    }
  }

检查值是小于 0 还是大于 50，如果没有设置为最小值/最大值。

【讨论】：