如何用Angular响应式表单结合matInput实现纯数字输入框？

最简解决方案 #

直接为matInput设置type="number"，浏览器会原生限制非数字字符的输入，行为和原生number输入框完全一致。如果之前没生效，大概率是该属性被其他代码覆盖了，排查并确保type="number"正确设置即可。

配合响应式表单的验证增强 #

如果需要对输入的数字做更严格的校验（比如只允许整数），可以结合Angular响应式表单的正则验证器：

模板代码

<form [formGroup]="numberForm">
  <mat-form-field>
    <input 
      matInput 
      type="number" 
      formControlName="numberInput" 
      placeholder="请输入数字"
    >
    <mat-error *ngIf="numberForm.get('numberInput')?.hasError('pattern')">
      仅允许输入整数数字
    </mat-error>
    <mat-error *ngIf="numberForm.get('numberInput')?.hasError('required')">
      此字段为必填项
    </mat-error>
  </mat-form-field>
</form>

组件类代码

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-number-input',
  templateUrl: './number-input.component.html'
})
export class NumberInputComponent {
  numberForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.numberForm = this.fb.group({
      numberInput: ['', [
        Validators.required,
        // 正则限制仅输入0-9的整数
        Validators.pattern('^[0-9]*$')
      ]]
    });
  }
}

进阶：实时过滤输入（屏蔽特殊字符） #

如果需要彻底屏蔽e、+、-等number输入框允许的特殊字符，可以自定义指令来实时过滤输入内容：

自定义指令代码

import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appOnlyNumbers]'
})
export class OnlyNumbersDirective {
  constructor(private ngControl: NgControl) {}

  @HostListener('input', ['$event'])
  onInputChange(event: Event): void {
    const inputElement = event.target as HTMLInputElement;
    // 过滤掉所有非数字字符
    const filteredValue = inputElement.value.replace(/[^0-9]/g, '');
    // 更新表单控件的值
    this.ngControl.control?.setValue(filteredValue, { emitEvent: false });
  }
}

模板中使用指令

<input 
  matInput 
  type="number" 
  formControlName="numberInput" 
  appOnlyNumbers
  placeholder="请输入整数"
>

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