Generates complete Angular dir…

# Angular 15 数字输入指令（支持响应式表单）

一、指令代码

```typescript

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

import { ControlValueAccessor } from '@angular/forms';

@Directive({

selector: '[appNumberOnly]',

standalone: true // Angular 15 支持 Standalone

})

export class NumberOnlyDirective {

// 可配置小数位数，默认2位

@Input() decimalPlaces = 2;

constructor(private el: ElementRef<HTMLInputElement>) {}

@HostListener('input', ['$event'])

onInput(event: InputEvent) {

const input = this.el.nativeElement;

let value = input.value;

// 1. 只保留数字和小数点

value = value.replace(/[^\d.]/g, '');

// 2. 去除多余的小数点

const parts = value.split('.');

if (parts.length > 2) {

value = parts[0] + '.' + parts.slice(1).join('');

}

// 3. 限制小数位数

const [int, dec] = value.split('.');

if (dec && dec.length > this.decimalPlaces) {

value = int + '.' + dec.slice(0, this.decimalPlaces);

}

input.value = value;

// 4. 关键：手动派发 input 事件，让响应式表单（ngModel/FormControl）同步值

input.dispatchEvent(new Event('input'));

}

}

```

二、使用方式

```html

<!-- 模板驱动 / 响应式表单通用 -->

<input type="text" appNumberOnly formControlName="price" />

<!-- 自定义小数位数 -->

<input type="text" appNumberOnly [decimalPlaces]="3" formControlName="amount" />

```

三、关键点说明

• 响应式表单同步：指令直接修改 DOM 的 value 不会触发 Angular 的表单值更新，因此最后手动 dispatchEvent(new Event('input')) 让 ControlValueAccessor 感知变化。
• 不要用 type="number"：原生 number 输入框对格式控制（如多小数点）支持有限，建议用 type="text" 配合指令。
• standalone: true：Angular 15 支持 Standalone 指令，若项目是 Module 模式，删掉该行并到 Module 的 `declar