Angular HttpClient无法向ASP.NET Core Web API提交表单值

问题根源 #

你遇到的400错误是因为Angular端复选框的数据格式与API端模型不匹配：

• Angular中你将所有复选框绑定到单个FormControl（formControlName="checkbox"），该控件最终只会返回最后一个选中的复选框值（字符串类型）
• 但ASP.NET Core的FormData类中Checkbox字段定义为List<string>，期望接收字符串数组，模型绑定失败直接触发400验证错误。

解决方案 #

步骤1：修改Angular表单为FormArray存储多选值 #

在form-page.component.ts中，将单个checkbox控件替换为FormArray，用于存储多个选中的复选框值：

首先导入FormArray：

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

更新组件代码：

export class FormPageComponent {
  form: FormGroup;
  states: string[] = ['Tamilnadu', 'Kerala', 'Karnataka','Maharastra'];
  cities: {[key: string]: string[]} = {
    'Tamilnadu': ['Chennai', 'Coimbatore','Madurai'],
    'Kerala': ['Trivandrum','Kochi','Kollam'],
    'Karnataka': ['Bangalore', 'Mysore'],
    'Maharastra': ['Mumbai', 'Pune']
  };
  // 定义所有附加选项
  addonOptions: string[] = [
    '10%off First service visit',
    '10%off Waterwash',
    'Free AC Inspection'
  ];

  constructor(private fb: FormBuilder,private location : Location,private carServiceService :CarServiceService) {
    this.form = this.fb.group({
      carmodel :['', [Validators.required, Validators.minLength(3)]],
      carnum :['', [Validators.required]],
      contactNumber: ['', [Validators.required, Validators.pattern(/^\d{10}$/)]],
      option: ['', Validators.required],
      // 替换为FormArray，每个选项对应一个FormControl
      checkbox: this.fb.array(
        this.addonOptions.map(() => this.fb.control(false)),
        [Validators.requiredTrue] // 验证至少选中一个
      ),
      state: ['', Validators.required],
      city: ['', Validators.required]
    });
  }

  // 方便模板获取FormArray
  get checkboxArray(): FormArray {
    return this.form.get('checkbox') as FormArray;
  }

  onSubmit() {
    if (this.form.valid) {
      // 提取选中的复选框值
      const selectedAddons = this.checkboxArray.controls
        .map((control, index) => control.value ? this.addonOptions[index] : null)
        .filter(value => value !== null);

      // 构造符合API要求的提交数据
      const submitData = {
        ...this.form.value,
        checkbox: selectedAddons
      };

      this.carServiceService.addCar(submitData).subscribe(response =>{
        console.log(response);
      });
    } else {
      this.form.markAllAsTouched();
    }
  }

  // 其他方法保持不变...
}

步骤2：更新模板中的复选框绑定 #

修改form-page.component.html中的复选框部分，循环绑定FormArray的控件：

<div>
  <label>Addons:</label>
  <div *ngFor="let control of checkboxArray.controls; let i = index">
    <label>
      <input type="checkbox" [formControl]="control"> 
      {{ addonOptions[i] }}
    </label>
  </div>
  <div *ngIf="checkboxArray.touched && checkboxArray.invalid">
    <div class="error">Please select at least one Addon</div>
  </div>
</div>

步骤3：验证API端模型（可选） #

如果需要强制用户至少选中一个附加选项，可以恢复ASP.NET Core控制器中的验证逻辑：

[HttpPost("submit-form")]
public IActionResult SubmitForm([FromBody] FormData formData)
{
    // 恢复必填验证
    if (string.IsNullOrWhiteSpace(formData.Carmodel) || 
        string.IsNullOrWhiteSpace(formData.Carnum) || 
        string.IsNullOrWhiteSpace(formData.ContactNumber) || 
        string.IsNullOrWhiteSpace(formData.Option) || 
        (formData.Checkbox == null || formData.Checkbox.Count == 0) || 
        string.IsNullOrWhiteSpace(formData.State) || 
        string.IsNullOrWhiteSpace(formData.City))
    {
        return BadRequest(new { Message = "Enter the required fields." });
    }

    formsDataList.Add(formData);
    return Ok(formData);
}

原理说明 #

原来的单个FormControl绑定多个复选框时，只会存储最后一次选中的字符串值，而API期望的是List<string>数组，ASP.NET Core模型绑定器无法完成类型转换，因此返回400错误。改用FormArray后，我们可以正确收集所有选中的选项并转换为数组提交，与API的模型结构完全匹配，即可解决问题。

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