如何获取带后缀下拉框的Angular Material FormField组合值

要实现输入框数字和后缀单位合并到同一个formControlName，可以通过以下步骤处理：

1. 调整模板结构 #

给输入框和下拉框分别设置独立的表单控件，方便监听各自的变化：

<mat-form-field class="flex">
  <mat-label>Width</mat-label>
  <!-- 数字输入控件 -->
  <input matInput formControlName="widthValue" type="number" autocomplete="off">
  <!-- 单位选择控件 -->
  <mat-select matSuffix formControlName="widthUnit">
    <mat-option *ngFor="let unit of unitArray" [value]="unit">{{unit}}</mat-option>
  </mat-select>
</mat-form-field>

2. 组件逻辑实现 #

在组件中通过表单控件的变化监听，将数值和单位合并为字符串，同步到目标formControl；同时支持从已有值拆分出数值和单位，回显到对应控件。

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

@Component({
  // 替换为你的组件元数据
})
export class YourComponent implements OnInit {
  unitArray = ['pt','cm','mm','in','pi'];
  // 包含数值和单位的子表单
  private widthSubForm: FormGroup;
  // 父表单（根据你的实际表单结构调整，需包含目标width控件）
  parentForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.parentForm = this.fb.group({
      width: [''] // 最终存储合并值的控件
    });

    this.widthSubForm = this.fb.group({
      widthValue: [''],
      widthUnit: ['cm'] // 设置默认单位
    });
  }

  ngOnInit(): void {
    // 监听子表单变化，合并值到width控件
    this.widthSubForm.valueChanges.subscribe(({ widthValue, widthUnit }) => {
      const combinedValue = widthValue ? `${widthValue}${widthUnit}` : '';
      // 禁用事件触发，避免循环更新
      this.parentForm.get('width')?.setValue(combinedValue, { emitEvent: false });
    });

    // 初始化：如果width已有值，拆分回显
    const initialWidth = this.parentForm.get('width')?.value;
    if (initialWidth) {
      const [numValue, unit] = this.splitWidth(initialWidth);
      this.widthSubForm.patchValue({
        widthValue: numValue,
        widthUnit: unit || this.unitArray[0]
      });
    }
  }

  // 拆分数值和单位的工具方法
  private splitWidth(combinedValue: string): [string, string] {
    // 匹配数字（含小数）和后续的单位
    const regex = /^(\d+(?:\.\d+)?)(.*)$/;
    const matchResult = combinedValue.match(regex);
    if (matchResult) {
      return [matchResult[1], matchResult[2]];
    }
    return ['', ''];
  }
}

3. 关键细节说明 #

• 避免循环更新：设置{ emitEvent: false }防止width控件值变化后再次触发子表单的更新逻辑。
• 默认单位：给widthUnit设置默认值，确保即使用户未选择单位也能生成合法格式的合并值。
• 数值拆分：使用正则表达式处理带小数的数值，确保拆分准确性。

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