Angular 5响应式表单：如何用复选框绑定empSkills字段？

嘿，作为Angular 5的新手，碰到这个问题太正常啦！针对你的需求，empSkills应该用FormArray来绑定，因为它是一个数组类型的字段，FormArray专门用来管理一组表单控件，完美适配复选框多选的场景——而FormControl更适合单个值的输入，比如你已经搞定的empID、empName这些文本框。

下面是具体的实现步骤，跟着来就行：

1. 在组件中初始化表单（包含FormArray） #

首先导入必要的表单模块，然后用FormBuilder来构建表单，其中empSkills定义为FormArray：

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

@Component({
  selector: 'app-employee-form',
  templateUrl: './employee-form.component.html'
})
export class EmployeeFormComponent implements OnInit {
  employeeForm: FormGroup;
  // 定义可选的技能列表，你可以根据实际需求修改
  availableSkills = ['Java', 'Devops', 'Angular', 'Python'];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单
    this.employeeForm = this.fb.group({
      empID: [''], // 你已完成绑定的字段
      empName: [''],
      empDesg: [''],
      empSkills: this.fb.array([]) // 这里用FormArray承载技能数组
    });
  }

  // 快捷获取empSkills的FormArray，方便后续操作
  get empSkills(): FormArray {
    return this.employeeForm.get('empSkills') as FormArray;
  }
}

2. 编写复选框的选中/取消逻辑 #

添加一个方法，用来处理复选框状态变化时，往FormArray里添加或移除对应的技能值：

onSkillToggle(skill: string, isChecked: boolean): void {
  if (isChecked) {
    // 勾选时，把技能添加到FormArray
    this.empSkills.push(this.fb.control(skill));
  } else {
    // 取消勾选时，找到对应技能的索引并移除
    const skillIndex = this.empSkills.controls.findIndex(control => control.value === skill);
    if (skillIndex !== -1) {
      this.empSkills.removeAt(skillIndex);
    }
  }
}

3. 模板中绑定复选框与FormArray #

在HTML模板里，遍历技能列表生成复选框，并绑定change事件和选中状态：

<form [formGroup]="employeeForm" (ngSubmit)="onSubmitForm()">
  <!-- 已完成的文本输入框部分 -->
  <div class="form-group">
    <label>员工ID</label>
    <input type="text" formControlName="empID" class="form-control">
  </div>
  <div class="form-group">
    <label>员工姓名</label>
    <input type="text" formControlName="empName" class="form-control">
  </div>
  <div class="form-group">
    <label>职位</label>
    <input type="text" formControlName="empDesg" class="form-control">
  </div>

  <!-- 技能复选框部分 -->
  <div class="form-group" formArrayName="empSkills">
    <label>技能选择</label>
    <div *ngFor="let skill of availableSkills; let i = index" class="form-check">
      <label class="form-check-label">
        <input 
          type="checkbox" 
          class="form-check-input"
          (change)="onSkillToggle(skill, $event.target.checked)"
          [checked]="empSkills.controls.some(control => control.value === skill)"
        >
        {{ skill }}
      </label>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">提交表单</button>
</form>

4. 提交表单时转换为指定JSON结构 #

表单提交时，直接获取表单值即可得到你需要的结构，只需注意把empID转换为数字类型（因为文本框输入的是字符串）：

onSubmitForm(): void {
  const formValues = this.employeeForm.value;
  // 转换为你需要的JSON结构
  const submitData = {
    empDesg: formValues.empDesg,
    empID: Number(formValues.empID), // 转为数字类型
    empName: formValues.empName,
    empSkills: formValues.empSkills
  };

  // 这里调用你的REST API提交数据
  // this.http.post('你的API地址', submitData).subscribe(response => {
  //   console.log('提交成功', response);
  // });

  // 可以先打印看看结构是否符合要求
  console.log('待提交数据:', submitData);
}

这样处理后，你选中的技能就会自动存入empSkills数组，提交的JSON结构完全符合你给出的示例～

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