Angular Reactive Forms 如何实现输入显示值与表单模型值格式不同？

这个需求完全可以实现，Angular 提供的 ControlValueAccessor 接口就是专门处理这类表单视图值和模型值自定义双向转换的场景，具体实现可以用自定义指令完成，不需要封装复杂的组件，直接复用原生输入框即可。

核心实现步骤 #

• 第一步：创建自定义日期格式转换指令，实现 ControlValueAccessor 接口，分别处理两个方向的格式转换逻辑：
  • 模型转视图：当通过 patchValue/setValue 修改表单模型值时，触发 writeValue 方法，将模型中 YYYY-MM-DD 格式的日期转换为 DD MM YYYY 渲染到输入框
  • 视图转模型：当用户在输入框输入内容时，将用户输入的 DD MM YYYY 格式转换为 YYYY-MM-DD 同步给表单模型
• 第二步：在需要用的输入框上绑定该指令，配合原生表单或响应式表单使用即可

完整代码示例 #

1. 自定义转换指令 #

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

const DATE_VALUE_ACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: DateFormatDirective,
  multi: true
};

@Directive({
  selector: '[appDateFormat]',
  providers: [DATE_VALUE_ACCESSOR]
})
export class DateFormatDirective implements ControlValueAccessor {
  onChange = (val: string) => {};
  onTouched = () => {};

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

  // 模型转视图：处理patchValue/setValue的反向转换
  writeValue(value: string): void {
    if (!value) {
      this.el.nativeElement.value = '';
      return;
    }
    // 拆分YYYY-MM-DD格式
    const [year, month, day] = value.split('-');
    this.el.nativeElement.value = `${day} ${month} ${year}`;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

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

  setDisabledState(isDisabled: boolean): void {
    this.el.nativeElement.disabled = isDisabled;
  }

  // 监听用户输入，视图转模型
  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
    if (!value.trim()) {
      this.onChange('');
      return;
    }
    // 拆分DD MM YYYY格式，补前导0保证格式正确
    const [day, month, year] = value.split(' ').map(item => item.padStart(2, '0'));
    const modelValue = `${year}-${month}-${day}`;
    this.onChange(modelValue);
  }

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

2. 模板使用示例 #

<form [formGroup]="form">
  <!-- 绑定自定义指令即可 -->
  <input type="text" formControlName="date" appDateFormat placeholder="请输入DD MM YYYY格式日期">
</form>

3. 组件侧表单定义 #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      date: ['']
    });

    // 测试patchValue反向转换
    setTimeout(() => {
      this.form.patchValue({ date: '1999-12-25' });
      // 此时输入框自动显示 25 12 1999
      console.log('表单模型值：', this.form.value.date); // 输出1999-12-25
    }, 2000);
  }
}

补充优化点 #

• 可在指令中增加格式校验逻辑，用户输入不符合 DD MM YYYY 格式时，返回表单校验错误
• 可添加自动补空格逻辑，用户输入到第2位、第5位时自动插入空格，提升输入体验
• 边界场景下可增加日期合法性校验，避免出现2月30日这类无效日期

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