如何在使用FormControlName的输入控件中应用Percent Pipe格式化值

要实现输入框初始显示42%、用户修改时自动双向转换的需求，最简洁的方式是通过自定义指令实现ControlValueAccessor，对接Angular的表单控制流，同时利用内置的PercentPipe完成格式化逻辑。

步骤1：创建百分比输入指令 #

这个指令会负责模型值（数值）和视图值（百分比字符串）的双向转换：

import { Directive, ElementRef, HostListener } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { PercentPipe } from '@angular/common';

@Directive({
  selector: '[appPercentInput]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: PercentInputDirective,
      multi: true
    }
  ]
})
export class PercentInputDirective implements ControlValueAccessor {
  private onChange: (value: number) => void = () => {};
  private onTouched: () => void = () => {};

  constructor(
    private el: ElementRef,
    private percentPipe: PercentPipe
  ) {}

  // 从模型到视图：把数值转成百分比字符串显示
  writeValue(value: number): void {
    if (value != null) {
      // '1.0-0'表示整数百分比，可根据需求调整（比如'1.2-2'显示两位小数）
      this.el.nativeElement.value = this.percentPipe.transform(value, '1.0-0');
    } else {
      this.el.nativeElement.value = '';
    }
  }

  registerOnChange(fn: (value: number) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  // 从视图到模型：把用户输入的百分比字符串转成数值
  @HostListener('input', ['$event.target.value'])
  handleInput(value: string): void {
    const cleanValue = value?.replace('%', '').trim();
    const numericValue = cleanValue ? parseFloat(cleanValue) / 100 : null;
    this.onChange(isNaN(numericValue) ? null : numericValue);
  }

  // 失去焦点时重新格式化，确保显示规范
  @HostListener('blur')
  handleBlur(): void {
    this.onTouched();
    const currentValue = this.el.nativeElement.value?.replace('%', '').trim();
    const numericValue = currentValue ? parseFloat(currentValue) / 100 : null;
    this.writeValue(numericValue);
  }
}

步骤2：在模块中注册指令和依赖 #

确保你的模块导入CommonModule（提供PercentPipe）、ReactiveFormsModule，并声明自定义指令：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { PercentInputDirective } from './percent-input.directive';

@NgModule({
  declarations: [PercentInputDirective],
  imports: [CommonModule, ReactiveFormsModule],
  exports: [PercentInputDirective]
})
export class SharedModule {}

步骤3：在模板中使用指令 #

直接给响应式表单的输入框添加指令即可：

<div [formGroup]="myFormGroup">
  <input formControlName="myNumber" appPercentInput>
</div>

效果说明 #

• 初始加载时，表单值0.42会自动显示为42%
• 用户输入50，失去焦点后会自动补全为50%，同时表单模型值变为0.5
• 用户输入35.5%，表单模型值会自动转为0.355

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