Angular中如何禁止输入负数但允许输入浮点数？

下面是几个Angular项目里常用的实现方式，既能阻止用户输入负数，又支持合法的浮点数输入：

1. 自定义输入指令（推荐复用） #

写一个自定义指令监听输入事件，实时过滤非法输入，这种方式可以在整个项目里复用：

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

@Directive({
  selector: '[appNonNegativeFloat]'
})
export class NonNegativeFloatDirective {

  @HostListener('input', ['$event']) onInputChange(event: any) {
    const input = event.target;
    // 过滤掉非数字和非小数点的字符
    let value = input.value.replace(/[^0-9.]/g, '');
    // 确保只有一个小数点
    const parts = value.split('.');
    if (parts.length > 2) {
      value = parts[0] + '.' + parts.slice(1).join('');
    }
    // 开头是小数点时自动补0
    if (value.startsWith('.')) {
      value = '0' + value;
    }
    input.value = value;
    // 触发ngModel变更（适配双向绑定场景）
    input.dispatchEvent(new Event('input'));
  }
}

使用时直接在input标签上添加指令：

<input type="text" appNonNegativeFloat [(ngModel)]="numberValue">

2. 模板驱动表单验证 #

如果用模板驱动表单，可以结合pattern验证器和ngModel，在模板里直接限制输入规则：

<input type="text" 
       [(ngModel)]="floatValue" 
       #floatInput="ngModel"
       pattern="^[0-9]+(\.[0-9]+)?$"
       required>

<!-- 显示错误提示 -->
<div *ngIf="floatInput.invalid && (floatInput.dirty || floatInput.touched)">
  <div *ngIf="floatInput.errors?.['pattern']">请输入非负整数或浮点数</div>
</div>

这种方式会在输入不符合规则时标记表单为无效，适合需要表单验证反馈的场景，但不会实时阻止非法字符输入。

3. 响应式表单验证 #

对于响应式表单，可以在FormControl中添加内置验证器或自定义验证逻辑：

方式一：使用内置pattern验证 #

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

@Component({
  // 组件元数据
})
export class YourComponent {
  form = this.fb.group({
    floatNumber: ['', [
      Validators.required,
      Validators.pattern(/^[0-9]+(\.[0-9]+)?$/)
    ]]
  });

  constructor(private fb: FormBuilder) {}
}

方式二：自定义验证函数 #

如果需要处理更复杂的场景（比如允许开头是小数点的输入），可以写自定义验证器：

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

export function nonNegativeFloatValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;
    if (!value) return null; // 空值由required验证处理
    // 验证非负浮点数，支持.5这类格式
    const valid = /^[0-9]+(\.[0-9]+)?$/.test(value) || /^\.[0-9]+$/.test(value);
    return valid ? null : { invalidNonNegativeFloat: true };
  };
}

// 组件中使用
form = this.fb.group({
  floatNumber: ['', [
    Validators.required,
    nonNegativeFloatValidator()
  ]]
});

模板中显示错误：

<form [formGroup]="form">
  <input type="text" formControlName="floatNumber">
  <div *ngIf="form.get('floatNumber')?.invalid && (form.get('floatNumber')?.dirty || form.get('floatNumber')?.touched)">
    <div *ngIf="form.get('floatNumber')?.errors?.['invalidNonNegativeFloat']">请输入合法的非负浮点数</div>
  </div>
</form>

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