如何在Angular Material输入框添加显示后缀且提交时不包含该后缀

以下是适配你当前Angular + Angular Material技术栈的三种实现方案，按推荐优先级排序：

方案1：使用mat-suffix内置插槽（最推荐） #

Angular Material的mat-form-field原生支持后缀插槽，直接将单位放在插槽内即可实现和输入内容一体的视觉效果，完全不需要修改输入框绑定的实际值，提交时无需额外处理：

<mat-form-field appearance="fill" class="w-32per">
  <mat-label [ngClass]="{'alter-text-color':dealDispositionFormFields.isSubtenantTakingFullSpace === 'No'}">Subtenant Area (*)</mat-label>
  <input 
    name="subTenantArea" 
    class="alter-text-color"
    matInput
    [(ngModel)]="dealDispositionFormFields.subTenantArea"       
    [disabled]="dealDispositionFormFields.isSubtenantTakingFullSpace === 'Yes'"              
    [required]="isExistingDeal">
  <!-- 新增后缀单位 -->
  <mat-suffix> sf</mat-suffix>
</mat-form-field>

效果示意：

方案2：拆分显示值与实际存储值 #

如果需要单位直接出现在输入文本内，可拆分双向绑定逻辑，单独维护原始数值和显示文本：

1. HTML部分修改输入框绑定逻辑，拆分输入和显示：

<input 
  name="subTenantArea" 
  class="alter-text-color"
  matInput
  [ngModel]="formatArea(dealDispositionFormFields.subTenantArea)"
  (ngModelChange)="updateArea($event)"
  [disabled]="dealDispositionFormFields.isSubtenantTakingFullSpace === 'Yes'"              
  [required]="isExistingDeal">

2. TS部分新增两个处理方法：

// 格式化显示值，拼接sf后缀
formatArea(val: number | string): string {
  if (!val && val !== 0) return '';
  return `${val} sf`;
}

// 更新实际存储的原始数值，剔除后缀
updateArea(displayVal: string): void {
  const rawVal = displayVal.replace(/\s*sf$/, '').trim();
  this.dealDispositionFormFields.subTenantArea = rawVal ? Number(rawVal) : null;
}

提交表单时直接取dealDispositionFormFields.subTenantArea的原始值即可。

方案3：提交前统一处理字段值（备选） #

如果不想改动现有输入框绑定逻辑，可在表单提交回调中统一剔除后缀：

onSubmit() {
  // 提交前处理字段值
  const submitData = {
    ...this.dealDispositionFormFields,
    subTenantArea: this.dealDispositionFormFields.subTenantArea?.replace(/\s*sf$/, '').trim() || null
  };
  // 提交处理后的submitData即可
  // 后续提交逻辑...
}

注意该方案需要额外加输入校验，避免用户自行输入sf字符导致值处理异常。

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