如何检查用户输入是否小于Angular 2中的最大值答案

【问题标题】：How to check if user input is less than max value in Angular 2如何检查用户输入是否小于Angular 2中的最大值
【发布时间】：2020-11-02 09:02:27
【问题描述】：

我想在 Angular 中创建一个范围过滤器。用户不能输入小于最大输入值的最小值。

HTML：

<input type="text" class="form-control" formControlName="from" [placeholder]="Minimum" />

<input type="text" class="form-control" formControlName="to" [placeholder]="Maximum" />

我不知道该怎么办。我想我必须在 .ts 文件中创建两个变量（minValue 和 maxValue）。然后直接用 *ngIf 在 HTML 中检查，如果 minValue 小于 maxValue 则发送错误。

有人知道如何正确解决它吗？非常感谢

【问题讨论】：

最小值可以是任何东西，最大值不应该小于最小输入值对吗？这是你的问题吗？

标签： angular input range conditional-statements minimum

【解决方案1】：

您需要在更改“来自”formControl 时设置验证器

试试这样：

ngOnInit() {
    ...
    this.contactForm.get("from").valueChanges.subscribe(val => {
      this.contactForm.get("to").setValidators(Validators.min(val));
    });
}

Working Demo

【讨论】：

【解决方案2】：

你可以像下面这样尝试

component.html

<form [formGroup]="frmGrp">
    <input type="number" formControlName="fromValue" [min]="toCtrl.value" [value]="getMinValue()">
    <input type="number" formControlName="toValue">
</form>

Component.ts

export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;

  frmGrp: FormGroup;
  fromCtrl: AbstractControl;
  toCtrl: AbstractControl;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.frmGrp = this.fb.group({
      fromValue: [0],
      toValue: [0]
    });

    this.fromCtrl = this.frmGrp.get('fromValue') as FormControl;
    this.toCtrl = this.frmGrp.get('toValue') as FormControl;
  }

  getMinValue() {
    if (this.toCtrl.value > this.fromCtrl.value) {
      this.fromCtrl.setValue(this.toCtrl.value);
    }
    return this.fromCtrl.value;
  }
}

这是工作的stackblitz

【讨论】：