用於輸入的角度最小值和最大值驗證器[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; 
    }; 
}