Как опубликовать выбранные флажки в виде массива из углового в API

Я создал компонент "form-page" в модуле "form":

форма-page.component.html:

<form [formGroup] = "form" (submit) = "onSubmit()">
    <div>
        <label for = "carmodel">Car Model:</label>
        <input type = "text" class = "form-control" formControlName = "carmodel">
        <div *ngIf = "form.controls['carmodel'].touched && form.controls['carmodel'].errors">
          <div *ngIf = "form.controls['carmodel'].hasError('required')" class = "error">Carmodel is required.</div>
          <div *ngIf = "form.controls['carmodel'].hasError('minlength')">Carmodel should be minimum 3 characters.</div>
        </div>
    </div>

    <div>
        <label for = "carnum">Car Number:</label>
        <input type = "text" class = "form-control" formControlName = "carnum">
        <div *ngIf = "form.controls['carnum'].touched && form.controls['carnum'].errors">
          <div *ngIf = "form.controls['carnum'].hasError('required')" class = "error">carnum is required.</div>
        </div>
      </div>



    <div>
        <label for = "contactNumber">Contact Number:</label>
        <input type = "text" class = "form-control" formControlName = "contactNumber">
        <div *ngIf = "form.controls['contactNumber'].touched && form.controls['contactNumber'].errors">
          <div *ngIf = "form.controls['contactNumber'].hasError('required')" class = "error">Contact number is required.</div>
        </div>
    </div>
  
    <div>
      <label>Type of Service:</label>
      <div>
        <label><input type = "radio" name = "option" value = "Waterwash" formControlName = "option"> Waterwash </label>
      </div>
      <div>
        <label><input type = "radio" name = "option" value = "Fullservice" formControlName = "option"> Fullservice </label>
      </div>
      <div *ngIf = "form.controls['option'].touched && form.controls['option'].invalid">
        <div class = "error">Please select an option</div>
      </div>
    </div>
    <div>
      <label>Addons:</label>
      <div>
        <label><input type = "checkbox" value = "10%off First service visit" formControlName = "checkbox"> 10%off First service visit</label>
      </div>
      <div>
        <label><input type = "checkbox" value = "10%off Waterwash" formControlName = "checkbox"> 10%off Waterwash</label>
      </div>
      <div>
        <label><input type = "checkbox" value = "Free AC Inspection" formControlName = "checkbox"> Free AC Inspection</label>
      </div>
      <div *ngIf = "form.controls['checkbox'].touched && form.controls['checkbox'].invalid">
        <div class = "error">Please select at least one Addon</div>
      </div>
    </div>
    <div>
      <label>State:</label>
      <select formControlName = "state" (change) = "onStateChange()">
        <option *ngFor = "let state of states" [value] = "state">{{state}}</option>
      </select>
      <div *ngIf = "form.controls['state'].touched && form.controls['state'].invalid">
        <div class = "error">Please select a state</div>
      </div>
    </div>
 
    <div>
        <label>City:</label>
        <select formControlName = "city">
            <option *ngFor = "let city of cities[form.controls['state'].value]" [value] = "city">{{city}}</option>
        </select>
        <div *ngIf = "form.controls['city'].touched && form.controls['city'].invalid">
            <div class = "error">Please select a city</div>
        </div>
    </div>

    <button type = "submit" class = "btn btn-primary">Submit</button>
    <button type = "button" (click) = "Reset()">Reset</button>
    <button (click) = "goBack()">back</button>


    

</form>

форма-page.component.ts:

import { Component } from '@angular/core';
import { Location } from '@angular/common';
//
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
//
import { CarServiceService } from 'src/app/services/car-service.service';


@Component({
  selector: 'app-form-page',
  templateUrl: './form-page.component.html',
  styleUrls: ['./form-page.component.css']
})
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']
  };
  

  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],
      checkbox: ['', Validators.required],
      state: ['', Validators.required],
      city: ['', Validators.required]
    });
  }

  goBack():void{
    this.location.back();
  }

  

  onSubmit() {
    if (this.form.valid) {
      this.carServiceService.addCar(this.form.value).subscribe(response =>{
        console.info(response);
      });

    } else {
      // Form is invalid, display error messages
      this.form.markAllAsTouched();
    }
  }



  Reset(){
    this.form.reset();
  }

  onStateChange() {
    const state = this.form.controls['state'].value;
    this.form.controls['city'].setValue('');
    if (state) {
      this.form.controls['city'].enable();
    } else {
      this.form.controls['city'].disable();
    }
  }
  //
}

Создал сервис под названием "car-service" для POST:

car-service.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CarServiceService {

  constructor(private http: HttpClient) { }

  addCar(formData : any): Observable<any>{
    return this.http.post<any>('https://localhost:7095/api/Forms/submit-form',formData);
  }
}

Я пытаюсь опубликовать значения формы в API. Когда я нажимаю отправить, я получаю ошибку 400.

POST https://localhost:7095/api/Forms/submit-form 400

Ошибка:

ERROR HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: 'OK', url: 'https://localhost:7095/api/Forms/submit-form', ok: false, …}error: {type: 'https://tools.ietf.org/html/rfc7231#section-6.5.1', title: 'One or more validation errors occurred.', status: 400, traceId: '00-88c37085e17ce434f174cf65d020c28e-1bd09d34125cb2dc-00', errors: {…}}headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: "Http failure response for https://localhost:7095/api/Forms/submit-form: 400 OK"name: "HttpErrorResponse"ok: falsestatus: 400statusText: "OK"url: "https://localhost:7095/api/Forms/submit-form"[[Prototype]]: 

В веб-API asp.net-core:

FormData.cs:

namespace AngularApi.Model
{
    public class FormData
    {
        public string Carmodel { get; set; }
        public string Carnum { get; set; }
        public string ContactNumber { get; set; }
        public string Option { get; set; }
        public List<string> Checkbox { get; set; }
        public string State { get; set; }
        public string City { get; set; }
    }
}

и вот мой FormController в API:

private static List<FormData> formsDataList = new List<FormData>();

[HttpPost("submit-form")]
        public IActionResult SubmitForm([FromBody] FormData formData)
        {
            // process the form data
            string carmodel = formData.Carmodel;
            string carnum = formData.Carnum;
            string contactNumber = formData.ContactNumber;
            string option = formData.Option;
            List<string> checkbox = formData.Checkbox;

            string state = formData.State;
            string city = formData.City;



            // validate the form data
 //           if (string.IsNullOrWhiteSpace(carmodel) || string.IsNullOrWhiteSpace(carnum) || string.IsNullOrWhiteSpace(contactNumber) || string.IsNullOrWhiteSpace(option) || checkbox == null || checkbox.Count == 0 || string.IsNullOrWhiteSpace(state) || string.IsNullOrWhiteSpace(city))
  //          {
  //              return BadRequest(new { Message = " Enter the required fields." });
   //         }
            formsDataList.Add(formData);


            //            return Ok(new { Message = "Form submitted successfully." });
            return Ok(formData);

        }

Входные данные даже не попадают в API. Поэтому я подозреваю, что проблема связана с HTTPClient и с флажком. Думаю, проблема связана с флажком. Потому что, если я полностью удалю поле флажка как из HTML-формы, так и из API, он будет работать отлично, и я смогу отправлять значения в API.

Может кто-нибудь сказать мне, как это решить.