Angular响应式表单中如何重写自定义组件的formControl返回值

核心原因是你当前在registerOnChange方法中直接将内部FormGroup的原始值透传给了父组件，只要在值传递前做一层转换即可。

具体修改步骤 #

1. 修改registerOnChange方法，对内部表单值做转换后再传给父组件的回调函数：

// 记得先导入rxjs的map操作符
import { map } from 'rxjs/operators';

registerOnChange(fn: any): void {
  console.log('on change');
  this.dateOfBirth.valueChanges.pipe(
    // 此处自定义转换逻辑，返回你需要的格式
    map(rawVal => {
      // 示例1：返回你代码中定义的value()方法结果
    // return this.value();

    // 示例2：返回标准YYYY-MM-DD格式字符串（可按需修改）
    if (!rawVal.day || !rawVal.month || !rawVal.year) return null;
    return `${rawVal.year}-${String(rawVal.month).padStart(2, '0')}-${String(rawVal.day).padStart(2, '0')}`;
  )
).subscribe(fn);
}

2. （可选，建议补充）修改writeValue方法，兼容父组件直接给表单赋值的场景：
   如果父组件会给date_of_birth控件赋值自定义格式的值，需要把传入的自定义值解析为内部FormGroup能识别的{day, month, year}格式，示例代码如下：

writeValue(val: any): void {
  if (!val) return;
  // 按你自定义的格式解析，这里以YYYY-MM-DD字符串为例
  const [year, month, day] = val.split('-').map(Number);
  this.dateOfBirth.setValue({ day, month, year }, { emitEvent: false });
}

修改完成后，父组件通过this.form.controls.date_of_birth.value拿到的就是你转换后的自定义值。

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