Angular Material如何在单个表单字段实现min/max数字范围输入

直接复用mat-date-range-input实现数字范围输入不可行，该指令是Angular Material为日期范围场景专属封装的组件，内置强制的日期解析、格式化、失焦转换逻辑，没有提供切换为普通数字/文本输入的配置项，必然会出现输入内容被自动转成日期格式的问题。

不需要依赖日期选择相关指令，直接基于mat-form-field搭配Material内置的范围输入样式类，即可实现和日期范围选择器视觉、交互完全一致的数字范围输入，同时保留响应式表单绑定能力。

组件TS代码 #

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, AbstractControl, ValidationErrors } from '@angular/forms';

@Component({
  selector: 'app-range-search',
  templateUrl: './range-search.component.html'
})
export class RangeSearchComponent {
  searchForm = new FormGroup({
    minValue: new FormControl<number | null>(null, [Validators.pattern(/^-?\d*\.?\d+$/)]),
    maxValue: new FormControl<number | null>(null, [Validators.pattern(/^-?\d*\.?\d+$/)])
  }, { validators: this.rangeValidator });

  // 可选：自定义校验，保证最大值大于等于最小值
  rangeValidator(group: AbstractControl): ValidationErrors | null {
    const min = group.get('minValue')?.value;
    const max = group.get('maxValue')?.value;
    if (min !== null && max !== null && min > max) {
      return { rangeInvalid: true };
    }
    return null;
  }

  search() {
    if (this.searchForm.invalid) return;
    const { minValue, maxValue } = this.searchForm.value;
    // 此处编写业务查询逻辑
    console.log('查询范围', minValue, maxValue);
  }
}

组件HTML代码 #

<form [formGroup]="searchForm" (ngSubmit)="search()">
  <mat-form-field appearance="fill">
    <mat-label>数值范围</mat-label>
    <div class="mat-date-range-input-container">
      <input
        matInput
        type="number"
        formControlName="minValue"
        placeholder="最小值"
        class="mat-start-date"
      >
      <span class="mat-date-range-input-separator">–</span>
      <input
        matInput
        type="number"
        formControlName="maxValue"
        placeholder="最大值"
        class="mat-end-date"
      >
    </div>
    <mat-error *ngIf="searchForm.hasError('rangeInvalid')">
      最小值不能大于最大值
    </mat-error>
    <mat-error *ngIf="searchForm.controls.minValue.invalid || searchForm.controls.maxValue.invalid">
      请输入有效数字
    </mat-error>
  </mat-form-field>

  <button mat-raised-button color="primary" type="submit">查询</button>
</form>

• 直接复用Angular Material内置的范围输入样式类，无需编写额外自定义CSS，视觉效果和官方日期范围选择器完全一致
• 两个输入框独立绑定数字类型表单控件，无内置日期转换逻辑，不会出现失焦内容被篡改的问题
• 支持单独输入最小值、单独输入最大值、同时输入两个值三种使用场景，完全匹配目标交互
• 可根据业务需求灵活扩展校验规则，比如限制整数输入、限制数值上下限等

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