Angular 输入的角度最小值和最大值验证器[类型='；数字'；]

据我所知（可能不是很好，因为我今天才开始看这个），它将检查

的最大值和最小值
我试着在我正在构建的应用程序中让它工作，但只有当输入完全为空时，它才会无效。其他值验证，偶数超出我的最小/最大范围

---

。我即将结束漫长的一天-有人能解释一下我必须做些什么，才能使我的plunk中的字段有效，值为5-10和无效，如果超出此范围，则为空或只是…无效。

我这里有一个自定义数字范围验证器：

基本上是这样的：

static range(min: number, max: number): ValidatorFn {
    return (c: AbstractControl): { [key: string]: boolean } | null => {
        if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) {
            return { 'range': true };
        }
        return null;
    };
}

静态范围（最小：编号，最大：编号）：验证器fn{
return（c:AbstractControl）：{[key:string]：boolean}| null=>{
如果（c.value&（isNaN（c.value）| | c.valuemax））{
返回{'range'：true}；
}
返回null；
};
}

我在这里有一个自定义数字范围验证器：

基本上是这样的：

static range(min: number, max: number): ValidatorFn {
    return (c: AbstractControl): { [key: string]: boolean } | null => {
        if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) {
            return { 'range': true };
        }
        return null;
    };
}

静态范围（最小：编号，最大：编号）：验证器fn{
return（c:AbstractControl）：{[key:string]：boolean}| null=>{
如果（c.value&（isNaN（c.value）| | c.valuemax））{
返回{'range'：true}；
}
返回null；
};
}

我强烈建议您使用反应式表单。
使用反应式表单时，您的业务逻辑将保留在

组件.ts

代码中，从而使您的模板更清晰、更易于推理

---

说明： 组件技术

component.html-模板

一些瓦尔

我强烈建议您使用反应式表单。
使用反应式表单时，您的业务逻辑将保留在

组件.ts

代码中，从而使您的模板更清晰、更易于推理

---

说明： 组件技术

component.html-模板

一些瓦尔

如文件所述：

max（）

仅作为函数而不是指令存在

这是由于评论中引用的。 但是，如果您确实想使用模板驱动的表单，您可以将这些

指令

放回原处：

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, Validators, AbstractControl } from '@angular/forms';

@Directive({
  selector: 'input[max]',
  providers: [{provide: NG_VALIDATORS, useExisting: MaxValidator, multi: true}]
})
export class MaxValidator implements Validator {
  @Input() max:number;
  validate(control: AbstractControl): {[key: string]: any} {
    if(typeof this.max == 'string') this.max = +this.max;
    return this.max ? Validators.max(this.max)(control) : null;
  }
}

我将让您重构它，以获得

MinValidator

一个

如文件所述：

max（）

仅作为函数而不是指令存在

这是由于评论中引用的。 但是，如果您确实想使用模板驱动的表单，您可以将这些

指令

放回原处：

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, Validators, AbstractControl } from '@angular/forms';

@Directive({
  selector: 'input[max]',
  providers: [{provide: NG_VALIDATORS, useExisting: MaxValidator, multi: true}]
})
export class MaxValidator implements Validator {
  @Input() max:number;
  validate(control: AbstractControl): {[key: string]: any} {
    if(typeof this.max == 'string') this.max = +this.max;
    return this.max ? Validators.max(this.max)(control) : null;
  }
}

---

我将让您重构它，以获得

MinValidator

一个

As@Mihailo的答案是正确的，但就我而言，我使用的是

 'myNum': ['', [Validators.minLength(5), Validators.maxLength(10)]] 

而不是

 'myNum': ['', [Validators.min(5), Validators.max(10)]] 

---

注意

min

不同于

minLength

，

max

不同于

maxLength

，，因为@Mihailo的答案是正确的，但在我的例子中，我使用了

 'myNum': ['', [Validators.minLength(5), Validators.maxLength(10)]] 

而不是

 'myNum': ['', [Validators.min(5), Validators.max(10)]] 

---

注意

min

不同于

minLength

，

max

不同于

maxLength

，

您从未在任何地方使用过验证器。默认情况下，它们将仅应用于angular 5中的模板驱动表单。看起来最小/最大支持已被删除，因为添加它是一个突破性的更改。看这个：还有这个：你永远不会在任何地方使用验证器。默认情况下，它们将仅应用于angular 5中的模板驱动表单。看起来最小/最大支持已被删除，因为添加它是一个突破性的更改。看这个：这个：我认为对于这样一个小的表单，深入到反应式（以前从未看过）会有点过分，但实际上（在我看来）它比基于模板的更直观。所以，为推动我朝着正确的方向前进而干杯。我认为对于这样一个小表单，投入到反应式（以前从未看过它们）会有点过分，但实际上（在我看来）它比基于模板的更直观。所以，为推动我走向正确的方向而干杯。