如何实现点击Upgrade时Angular Mat-Form-Field枚举默认显示CASH？

问题背景 #

需求为：点击id为1的“Upgrade”按钮时，“Account”字段默认显示CASH值（当前该位置无任何值）。已实现的代码如下：

Java枚举定义 #

public enum Account {
    CASH{
        @Override
        public String toString() {
            return "Cash";
        }
    },
    CARD{
        @Override
        public String toString() {
            return "Card";
        }
    },
}

Angular表单字段代码 #

<mat-form-field= "fill" style="margin: 10px 20px 10px 20px">
            <mat-label>Account</mat-label>
            <mat-select>
              <mat-option value="account" type= "text" formControlName="account">CASH</mat-option>
              <mat-option value="account" type= "text" formControlName="account">CARD</mat-option>
            </mat-select>
          </mat-form-field>

解决方案 #

1. 修复Angular表单的语法错误 #

你的表单代码存在两处关键错误，先修正：

• mat-form-field缺少appearance属性，正确写法为appearance="fill"
• formControlName应该绑定在mat-select上，而非mat-option；同时mat-option的value需对应枚举的实际值（CASH/CARD）

修正后的HTML代码：

<mat-form-field appearance="fill" style="margin: 10px 20px 10px 20px">
  <mat-label>Account</mat-label>
  <mat-select formControlName="account">
    <mat-option value="CASH">CASH</mat-option>
    <mat-option value="CARD">CARD</mat-option>
  </mat-select>
</mat-form-field>

2. 实现按钮点击设置默认值 #

在Angular组件类中，初始化表单并添加按钮点击事件处理逻辑：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  upgradeForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单，account字段默认空值
    this.upgradeForm = this.fb.group({
      account: ['']
    });
  }

  // 处理Upgrade按钮点击
  onUpgradeButtonClick(buttonId: number): void {
    if (buttonId === 1) {
      // 将account控件的值设置为CASH
      this.upgradeForm.get('account')?.setValue('CASH');
    }
  }
}

然后给按钮绑定点击事件：

<button id="upgrade-btn-1" (click)="onUpgradeButtonClick(1)">Upgrade</button>

3. Java端的适配（若涉及接口交互） #

如果点击按钮后需要调用后端接口，确保接口返回的枚举值为CASH/CARD（而非toString()返回的Cash/Card），这样前端可以直接匹配。若后端必须返回显示文本，可在前端做映射：

// 假设后端返回"Cash"，则对应设置为CASH
this.upgradeForm.get('account')?.setValue('CASH');

完成以上修改后，点击id为1的“Upgrade”按钮，Account下拉框会自动选中CASH选项并显示对应文本。

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