AngularCLI中如何点击按钮将数据解析到表单中

核心问题 #

你之前的写法行不通，原因很简单：mat-form-field是专门为input、select这类标准表单控件设计的，button不属于表单控件范畴，直接绑定formControlName根本不会生效，而且按钮的value属性也不会自动同步到表单里。

直接可用的解决方案 #

不需要把按钮放在mat-form-field里，直接给按钮绑定点击事件，手动将选中值同步到表单控件即可，同时可以添加选中状态样式提升用户体验：

模板代码（支持Mat-Icon嵌入）

<div class="flex-wrapper" [formGroup]="subForm">
  <button 
    type="button" 
    *ngFor="let res of resources"
    (click)="subForm.get('resourceName')?.setValue(res.value)"
    [class.selected]="subForm.get('resourceName')?.value === res.value"
  >
    <!-- 这里可以任意嵌入Mat-Icon或其他HTML -->
    <mat-icon>{{res.icon}}</mat-icon>
    {{res.label}}
  </button>
</div>

组件类代码

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

@Component({
  selector: 'app-resource-selector',
  templateUrl: './resource-selector.component.html',
  styleUrls: ['./resource-selector.component.scss']
})
export class ResourceSelectorComponent implements OnInit {
  subForm!: FormGroup;
  // 示例资源数组，可根据实际结构调整
  resources = [
    { label: '云存储', value: 'cloud_storage', icon: 'cloud' },
    { label: '本地文件', value: 'local_file', icon: 'folder' },
    { label: '数据库', value: 'database', icon: 'storage' }
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化子表单，和父表单组关联即可
    this.subForm = this.fb.group({
      resourceName: [''] // 初始值可根据需求设置
    });
  }
}

可选：选中状态样式（SCSS）

button {
  margin: 0 8px 8px 0;
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;

  &.selected {
    background: #1976d2;
    color: #fff;
    border-color: #1976d2;
  }

  mat-icon {
    font-size: 18px;
  }
}

关键说明 #

1. 手动同步表单值：通过(click)事件调用setValue方法，直接把选中的资源值写入表单控件，这是最可靠的方式
2. 选中状态判断：通过对比表单当前值和资源值，给选中的按钮添加样式，让用户清晰知道选择状态
3. 子表单兼容性：只要你的subForm正确注册到父组件的表单组中，Angular Material Stepper会自动识别子表单的验证和状态
4. HTML嵌入自由：按钮内部可以放任意HTML内容，包括Mat-Icon、图片、甚至复杂模板片段

为什么之前的写法无效 #

• 第一种用<input type="button">：这类按钮仅用于触发点击事件，不属于表单控件，不会被Angular Forms识别，自然无法传递值
• 第二种用<button>但放在mat-form-field里：mat-form-field的设计目标是包裹标准表单控件，不会处理按钮的value或关联表单控件，属于容器组件的误用

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