Javascript – how to get prefix values in angular input field

Problem:

I tried to add prefix on input field its perfectly ok but after submit form that value is not attached with input field value.

<form
    nz-form
    [formGroup]="invoiceForm"
    (ngSubmit)="saveInvoiceData(invoiceForm.value);" >
    <div class="row">
      <div class="col-lg-4 form-group">
        <div class="label-mini">
          <span>Reference</span>
        </div>
        <nz-input-group nzPrefix="REF-">
          <input
            type="text"
            nz-input
            nzSize="large"
            placeholder="Reference Name"
            formControlName="reference" />
        </nz-input-group>
      </div>
    </div>

    <button
      class="primary-btn"
      type="submit"
      [disabled]="invoiceForm.invalid">
      Submit
    </button>

</form>

on ts component:

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

I already attached prefix value REF- and when i submit form its not submit as like REF-12345

Its only get 12345

Solution:

To include the prefix value in the form data, you will need to manually add it to the value of the reference form control.

saveInvoiceData(formData) {
  const referenceValue = formData.reference;
  const prefixedReferenceValue = `REF-${referenceValue}`;
  // Submit the prefixed reference value
  console.log(prefixedReferenceValue);
}