如何在Angular表单中限制输入值范围为1至25（含两位小数）？

Hey there! Let's get your Angular input field properly restricted to values between 1 and 25, with support for up to two decimal places. Your existing code has the right idea, but we can polish the regex and add extra layers of validation for better user experience and robustness.

1. Fix & Refine the Regular Expression #

Your current regex has a tiny accidental leading space and some redundant patterns. Here's a cleaned-up, concise version that works perfectly:

^([1-9](\.[0-9]{1,2})?|1[0-9](\.[0-9]{1,2})?|2[0-4](\.[0-9]{1,2})?|25(\.0{1,2})?)$

Let me break down what this does:

• ^ and $ ensure the entire input is matched (no partial valid entries slipping through)
• [1-9](\.[0-9]{1,2})?: Matches values from 1 to 9, with optional 1-2 decimal places
• 1[0-9](\.[0-9]{1,2})?: Matches 10 to 19, with optional decimals
• 2[0-4](\.[0-9]{1,2})?: Matches 20 to 24, with optional decimals
• 25(\.0{1,2})?: Explicitly matches 25, 25.0, or 25.00 (no higher values allowed)

2. Add HTML5 Input Attributes for Instant Feedback #

While regex handles strict pattern validation, adding HTML5's min, max, and step attributes gives users immediate browser-level feedback—like preventing invalid increments/decrements or blocking out-of-range values outright:

<input 
  type="number"  <!-- Switches to numeric input for mobile keypad support -->
  id="input" 
  [(ngModel)]="player.input" 
  name="input" 
  required 
  min="1" 
  max="25" 
  step="0.01"  <!-- Allows precise 0.01 increments -->
  pattern="^([1-9](\.[0-9]{1,2})?|1[0-9](\.[0-9]{1,2})?|2[0-4](\.[0-9]{1,2})?|25(\.0{1,2})?)$" 
  #input="ngModel"
>

Note: If you need to keep type="text" for specific formatting needs, you can skip the number type and stick with the regex + validation message.

3. Optional: Custom Angular Validator (For Advanced Logic) #

If you need more control—like dynamic range values or custom error handling—you can create a custom validator in your component:

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function rangeValidator(min: number, max: number): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = parseFloat(control.value);
    if (isNaN(value)) return null; // Let the required validator handle empty input
    return value >= min && value <= max ? null : { outOfRange: true };
  };
}

Then attach it to your input (works for both template-driven and reactive forms):

<input 
  type="number" 
  id="input" 
  [(ngModel)]="player.input" 
  name="input" 
  required 
  min="1" 
  max="25" 
  step="0.01"
  [pattern]="rangeRegex"
  [ngModelOptions]="{ updateOn: 'blur' }"
  #input="ngModel"
  [validator]="rangeValidator(1,25)"
>

Update the error message to cover both regex and custom validator issues:

<div [hidden]="input.valid || input.pristine" class="alert alert-danger">
  * Input must be between 1-25 with up to two decimal places
</div>

Full Working Code Example #

Here's the complete, polished template combining all best practices:

<div class="row">
  <label for="input">Value</label>
  <input 
    type="number"
    id="input" 
    [(ngModel)]="player.input" 
    name="input" 
    required 
    min="1" 
    max="25" 
    step="0.01"
    pattern="^([1-9](\.[0-9]{1,2})?|1[0-9](\.[0-9]{1,2})?|2[0-4](\.[0-9]{1,2})?|25(\.0{1,2})?)$" 
    #input="ngModel"
  >
  <div [hidden]="input.valid || input.pristine" class="alert alert-danger">
    * Input must be between 1-25 with up to two decimal places
  </div>
</div>

This setup ensures:

• Native browser validation for range and step precision
• Strict regex enforcement of decimal place rules
• Clear, user-friendly error messaging

内容的提问来源于stack exchange，提问作者Abhishek Saha