Angular 13响应式表单：实现显示格式化号码与提交纯数字值

要实现输入框显示格式化手机号、提交时获取纯数字值的需求，最优雅的方式是通过自定义ControlValueAccessor指令处理视图值（显示的格式化内容）和模型值（提交的纯数字）之间的转换，以下是具体实现方案：

方法一：自定义手机号格式化指令（推荐） #

该指令会自动同步视图与模型的转换逻辑，完全集成到Angular表单体系中，无需在组件中额外处理。

1. 创建格式化指令 #

新建phone-formatter.directive.ts文件，实现ControlValueAccessor接口：

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

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

  constructor(private el: ElementRef) {}

  // 模型值转视图值：把纯数字格式化为(123) 456-7890
  writeValue(value: string): void {
    this.el.nativeElement.value = value ? this.formatPhone(value) : '';
  }

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

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

  // 监听输入事件：把视图的格式化内容转成纯数字传给模型
  @HostListener('input', ['$event.target.value'])
  onInput(value: string): void {
    const rawDigits = value.replace(/\D/g, ''); // 过滤所有非数字字符
    this.onChange(rawDigits);
    // 更新输入框显示的格式化内容
    this.el.nativeElement.value = this.formatPhone(rawDigits);
  }

  @HostListener('blur')
  onBlur(): void {
    this.onTouched();
  }

  // 手机号格式化逻辑
  private formatPhone(value: string): string {
    if (!value) return '';
    const cleaned = value.replace(/\D/g, '');
    // 匹配10位数字，格式化为(xxx) xxx-xxxx
    const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
    return match ? `(${match[1]}) ${match[2]}-${match[3]}` : cleaned;
  }
}

2. 在组件中使用指令 #

在表单组件模板中，给手机号输入框添加指令：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input 
    type="text" 
    formControlName="phno" 
    appPhoneFormatter
    placeholder="Enter phone number"
  >
  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

组件类中正常初始化响应式表单即可：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.myForm = this.fb.group({
      phno: ['', [Validators.required, Validators.minLength(10)]]
    });
  }

  onSubmit(): void {
    if (this.myForm.valid) {
      console.log(this.myForm.value); // 输出: {"phno": "11234566899"}
      // 直接提交this.myForm.value到后端即可
    }
  }
}

方法二：提交时手动处理值（快速临时方案） #

如果不想自定义指令，也可以在表单提交时手动过滤手机号中的非数字字符：

onSubmit(): void {
  if (this.myForm.valid) {
    // 过滤非数字字符
    const submitData = {
      ...this.myForm.value,
      phno: this.myForm.value.phno.replace(/\D/g, '')
    };
    console.log(submitData); // 得到纯数字手机号
    // 提交submitData到后端
  }
}

这种方式适合简单场景，但如果表单中有多个手机号输入框，或需要在其他逻辑中使用纯数字值，会存在重复处理的问题，不如自定义指令高效。

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