Angular输入框前缀值提交问题：如何让前缀随表单值一同提交？

使用NG-ZORRO的nz-input-group给输入框添加了nzPrefix="REF-"，UI显示正常，但提交表单时仅能获取到用户输入的内容（如12345），无法得到带前缀的完整值（REF-12345）。

原因说明 #

nzPrefix只是UI层面的装饰元素，不会修改输入框的实际value属性，所以表单控件只会存储用户输入的原始内容，提交时自然不会带上前缀。

解决方案 #

方案1：提交时手动拼接前缀（最简单）

在表单提交方法里，直接给reference字段拼接前缀后再提交：

saveInvoiceData(formValue: any) {
  // 构造带前缀的提交数据
  const submitData = {
    ...formValue,
    reference: formValue.reference ? `REF-${formValue.reference}` : ''
  };
  
  // 执行提交逻辑，比如调用后端接口
  console.log(submitData);
}

优势：无需修改表单控件逻辑，快速实现需求，适合仅在提交阶段需要前缀的场景。

方案2：监听输入变化自动添加前缀（实时同步）

如果希望用户输入时就能看到前缀，且表单值始终包含前缀，可以通过监听表单控件的valueChanges实现：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { distinctUntilChanged, Subject, takeUntil } from 'rxjs';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit, OnDestroy {
  invoiceForm!: FormGroup;
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    this.initializeForm();
  }

  initializeForm() {
    this.invoiceForm = new FormGroup({
      reference: new FormControl(''),
    });

    // 监听reference控件值变化，自动添加前缀
    this.invoiceForm.get('reference')?.valueChanges.pipe(
      distinctUntilChanged(),
      takeUntil(this.destroy$) // 组件销毁时取消订阅，避免内存泄漏
    ).subscribe(value => {
      // 避免重复添加前缀，处理空值情况
      if (value && !value.startsWith('REF-')) {
        // 关闭emitEvent防止循环触发
        this.invoiceForm.get('reference')?.setValue(`REF-${value}`, { emitEvent: false });
      } else if (!value) {
        this.invoiceForm.get('reference')?.setValue('', { emitEvent: false });
      }
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  saveInvoiceData(formValue: any) {
    // 此时formValue.reference已经带前缀，直接提交即可
    console.log(formValue);
  }
}

优势：用户输入时实时看到前缀，表单值始终保持带前缀的状态，适合需要前端展示与提交值一致的场景。

方案3：自定义表单控件（复用场景）

如果项目中多处需要带固定前缀的输入框，可以封装一个自定义表单控件，内部处理前缀逻辑，方便复用。核心思路是实现ControlValueAccessor接口，在写入和读取值时自动处理前缀。

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