Angular响应式表单复选框数据如何传递至API？

1. 修正表单控件定义与验证 #

首先调整component.ts中的services表单组，将每个复选框控件设为布尔值类型（默认未选中），并添加自定义验证器确保至少选中一个选项：

import { FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';

// 自定义验证器：确保至少选中一个复选框
function atLeastOneCheckboxValidator(group: FormGroup): ValidationErrors | null {
  const hasChecked = Object.values(group.controls).some(control => control.value);
  return hasChecked ? null : { required: true };
}

export class ContactComponent {
  contactForm!: FormGroup;

  // ... 保留原有的getter方法

  constructor(private fb: FormBuilder, private _emailService: EmailService) {}

  ngOnInit(): void {
    this.contactForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.minLength(3)]],
      phone: ['', [Validators.required, Validators.minLength(3)]],
      message: ['', [Validators.required, Validators.minLength(3)]],
      services: this.fb.group({
        floor: [false],
        deep: [false],
        residential: [false],
        commercial: [false],
        industrial: [false],
        sanitization: [false]
      }, { validators: atLeastOneCheckboxValidator })
    });
  }
}

2. 绑定HTML复选框到表单控件 #

修改component.html，将每个复选框与表单控件关联，同时确保整个服务区域属于父表单的一部分：

<!-- 确保整个表单包裹在<form [formGroup]="contactForm">标签内 -->
<form [formGroup]="contactForm">
  <div class="col-md-12 col-12 mb-5">
    <div class="heading-layout3">
      <h3 class="mg-b-10">Please Choose Your Service:</h3>
      <!-- 显示未选服务的错误提示 -->
      <div *ngIf="services.invalid && (services.dirty || services.touched)" class="text-danger">
        Please select at least one service.
      </div>
    </div>

    <!-- 将服务区域绑定到services表单组 -->
    <div formGroupName="services">
      <article class="feature1 col-md-4 col-sm-6 p-0">
        <input type="checkbox" id="feature1" formControlName="floor"/>
        <div>
          <span> Floor Maintenance </span>
        </div>
      </article>
      
      <article class="feature2 col-md-4 col-sm-6 p-0">
        <input type="checkbox" id="feature2" formControlName="deep"/>
        <div>
          <span> Deep Cleaning </span>
        </div>
      </article>
      
      <article class="feature3 col-md-4 col-sm-6 p-0">
        <input type="checkbox" id="feature3" formControlName="residential"/>
        <div>
          <span> Residential Cleaning </span>
        </div>
      </article>
      
      <article class="feature4 col-md-4 col-sm-6 p-0">
        <input type="checkbox" id="feature4" formControlName="commercial"/>
        <div>
          <span> Commercial Cleaning </span>
        </div>
      </article>
      <article class="feature5 col-md-4 col-sm-6 p-0">
        <input type="checkbox" id="feature5" formControlName="industrial"/>
        <div>
          <span> Industrial Cleaning </span>
        </div>
      </article>
      <article class="feature6 col-md-4 col-sm-6 p-0">
        <input type="checkbox" id="feature6" formControlName="sanitization"/>
        <div>
          <span> Sanitization Services </span>
        </div>
      </article>
    </div>
  </div>

  <!-- 添加提交按钮 -->
  <button type="submit" (click)="onSubmit()" [disabled]="!contactForm.valid">Submit</button>
</form>

3. 实现表单提交与API数据传递 #

在component.ts中添加提交方法，收集选中的服务数据并传递给API：

export class ContactComponent {
  // ... 保留原有代码

  onSubmit(): void {
    if (this.contactForm.valid) {
      // 收集选中的服务名称（根据API需求调整格式）
      const serviceMap = {
        floor: 'Floor Maintenance',
        deep: 'Deep Cleaning',
        residential: 'Residential Cleaning',
        commercial: 'Commercial Cleaning',
        industrial: 'Industrial Cleaning',
        sanitization: 'Disinfectant and Sanitization'
      };

      const selectedServices = Object.entries(this.contactForm.value.services)
        .filter(([key, isChecked]) => isChecked)
        .map(([key]) => serviceMap[key as keyof typeof serviceMap]);

      // 构造API请求 payload
      const requestData = {
        ...this.contactForm.value,
        services: selectedServices // 若API需要布尔值对象，可直接传this.contactForm.value.services
      };

      // 调用API服务
      this._emailService.sendContactForm(requestData).subscribe({
        next: (response) => {
          console.log('Form submitted successfully', response);
          this.contactForm.reset(); // 提交成功后重置表单
        },
        error: (error) => {
          console.error('Failed to submit form', error);
          // 处理错误提示
        }
      });
    }
  }
}

关键说明 #

• 自定义验证器atLeastOneCheckboxValidator确保用户必须选择至少一项服务
• 使用formGroupName和formControlName实现Angular表单的双向绑定
• 提交时根据API需求整理数据格式：可以传递选中的服务名称数组，或者保留布尔值对象
• 提交按钮禁用状态绑定到表单有效性，避免无效提交

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