如何从FormControl获取元素ID？Angular表单提交问题

你当前的代码是普通文本输入框，无法实现带标签（显示值）和键（ID）的选择功能，需要改用Angular Material的<mat-select>组件来实现，以下是完整的解决方案：

1. 修正后的表单模板代码 #

<form (submit)="onSubmit()" [formGroup]="form">
  <mat-form-field>
    <mat-select formControlName="username" placeholder="选择用户" required>
      <!-- 用mat-option渲染选项，value绑定用户ID（键），显示文本为用户名称（标签） -->
      <mat-option [value]="user.id" *ngFor="let user of userList">
        {{ user.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <button mat-raised-button color="primary" type="submit">submit</button>
</form>

2. 组件类逻辑实现 #

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

@Component({
  selector: 'app-user-select',
  templateUrl: './user-select.component.html',
})
export class UserSelectComponent {
  form: FormGroup;
  // 模拟业务中的用户列表，包含ID（键）和名称（标签）
  userList = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' }
  ];

  constructor(private fb: FormBuilder) {
    // 初始化表单控件
    this.form = this.fb.group({
      username: ['']
    });
  }

  onSubmit() {
    if (this.form.valid) {
      // 直接从表单控件中获取选中的用户ID
      const selectedUserId = this.form.controls['username'].value;
      console.log('选中的用户ID：', selectedUserId);
      // 这里添加你的表单提交逻辑
    }
  }
}

关键说明 #

• <mat-option>的[value]属性绑定用户的ID值，这样表单控件存储的就是你需要的键（ID），而用户看到的是对应的标签（名称）
• 提交表单时，通过form.controls['username'].value就能直接拿到选中的ID，无需额外转换

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