用于输入的角度最小值和最大值验证器[type ='number']

Question

据我所知（可能不是很好，因为我今天才开始看这个）there is are validators built in to Angular将检查<input type='number'>的最大值和最小值。
我试图让这个工作在我正在构建的应用程序中，但只有在输入完全为空时它才会失效。其他值验证，即使我的最小/最大范围之外的数字。

I tried to replicate it in a plunk but here it is just always valid。我在漫长的一天结束 - 任何人都可以只是解释什么，我必须做的，使场在我普拉克是有效与当超出这个范围的5-10和无效值，空或其他只是...无效。

Answer 1

我强烈建议你使用活性形式代替。
With 反应式表格您的业务逻辑保留在component.ts代码中，使您的模板更加清晰和易于推理。

WorkingExample (based on your original plunk)

---

说明：

component.ts

myForm = new FormGroup({}) // Instantiating our form 

constructor(private fb: FormBuilder){ // Injecting the ReactiveForms FormBuilder. 
    this.myForm = fb.group({ 
    // Adding the "myNum" input to our FormGroup along with its min-max Validators. 
    'myNum': ['', [Validators.min(5), Validators.max(10)]] 
    }) 
} 

component.html - 模板

<form [formGroup]="myForm"> <!-- Binding myForm to the form in the template --> 

    <label for="myNum">Some Val</label> 
    <!-- formControlName binds our myNum field declared in the ts code. --> 
    <input type='number' id="myNum" formControlName="myNum"> 

</form> 

Answer 2

我有一个自定义编号范围验证此：https://github.com/DeborahK/MovieHunter/tree/master/src/app/shared

它基本上是这样的：

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