How to post data value to a web service from a checkbox Angular 4

I'm building a registration form which is like: User enters his details - chooses his type (teacher or student)

And then chooses which class and grade he belongs to.

So i'm getting grades and classes data from a web service and i put it in a NgFor using checkbox.

And using POST method to send HTTP with user details to another web service.

Now i want to know the way to post data value from a checkbox to the web service, like if he checked class 2A it posts to the API (2A)

How do i do that? if somebody has a resource or knows the way.

My component TS:

name: any[];
email: any[];
password: any[];
type_id: number[] = [];
school_id: any[];
grade_id: any[] = [];
class_id: any[] = [];
subject_id: any[] = [];
grades:string;
classes:string;
subjects:string;
id: number[] = [];
imageFile: any;
type_name: any[];
public selectedSchoolId: number;
public schoolDetail: SchoolsModel;
public divisionList: SchoolsModel[];
private url = 'http://crm.easyschools.org/api/en/users/register';

getFile(event){
this.imageFile =  event.target.files[0];
}
onSubmit(form: NgForm) {
var data = form.value;
let formData: FormData = new FormData();
// debugger;
formData.append('image', this.imageFile, this.imageFile.name);
formData.append('name', data.name);
formData.append('email', data.email);
formData.append('password', data.password);
formData.append('type_name', data.type_name);
formData.append('type_id', this.type_id);
formData.append('school_id', this.selectedSchoolId;
formData.append('class_id[0]', 7);
formData.append('grade_id[0]', 17);
formData.append('subject_id', 9);
this._http.post(this.url, formData)
  .subscribe(response => {
    // debugger;
    console.log(response);
  }, (err: HttpErrorResponse) => {
    console.log(err);
  });

}

ngOnInit(): void {
this.route.params.subscribe((params) => {
  this.selectedSchoolId = +params.id;
  this.getSelectedSchoolDetail();
});
}

My component HTML:

<form #registerForm="ngForm" enctype="multipart/form-data"><!--== 
start form ==-->
<div  class="col-md-12 " id="append-types-here" style="text-align: 
center;">
<div class="row col-md-12">
<input name="name" ngModel #name="ngModel" style="text-align: 
left;" type="text" class="rounded-inputs26 col-md-6 add-account-
inputs1" placeholder="Fullname ">
</div>
<input name="email" ngModel #email="ngModel" style="text-align: left;" 
type="email" class="rounded-inputs26 col-md-6 add-account-inputs1" 
placeholder="Email" >
<input name="password" ngModel #password="ngModel" style="text-align: 
left;" type="password" class="rounded-inputs26 col-md-6 add-account-
inputs1" id="password1" placeholder="Password" >
<input name="password" style="text-align: left;" type="password" 
class="rounded-inputs26 col-md-6 add-account-inputs1" 
id="confirm_password1" placeholder="Confirm password" >
<span id='message1'></span>
<select id="select-type" [(ngModel)]="type_id" name="type_id"  
class="rounded-inputs26 col-md-6 add-account-inputs1">
<option selected="selected">Account Type...</option>
<option id="type1" [ngValue]="3"><span name="type_name" 
type="text">Teacher</span></option>
<option id="type2" [ngValue]="4">Parent</option>
<option id="type3" [ngValue]="5">Student</option>
</select>
</div>
<div  id="third-type" class="row col-md-12">
<ng-container *ngIf="divisionList">
<div class="col-md-3" style="margin: auto;overflow: auto;">
<div style="list-style: none;background-color:#054360;padding: 
10px;color:white;">
<input class="choose-choose5" type="checkbox"> Grades:</div>
<div  style="background-color:white;border: solid 1px #004360;float: 
left;width: 100%;">
<h6 *ngFor="let division of divisionList" class="pull-left col-md-12" 
style="border-bottom:1px solid #999999;padding-top: 5px;">
<input (change)="onChangeGrade($event.target.value)" style="float: 
left;margin-left:25px;" class="choose-choose11" type="checkbox" id="">
<label  style="padding-right: 90px;white-space: nowrap;">
</label>
</h6>

</div></div>
<div class="col-md-3" style="margin: auto;overflow: auto;">
<div style="list-style: none;background-color:#054360;padding: 
10px;color:white;">
<input class="choose-choose6" type="checkbox"> Classes:</div>
<div style="background-color:white;border: solid 1px #004360;float: 
left;width: 100%;">
<h6   *ngFor="let division1 of divisionList" class="pull-left col-md-
12" style="border-bottom:1px solid #999999;padding-top: 5px;">
<input (change)="onChangeClass($event.target.value)" style="float: 
left;margin-left:25px;" class="choose-choose12" type="checkbox" >
<label  style="padding-right: 90px;white-space: nowrap;">
</label></h6>

</div></div>

<div class="col-md-3 hide" id="subjects-select" style="margin: 
auto;overflow: auto;">
<div style="list-style: none;background-color:#054360;padding: 
10px; color:white;"> Subjects:</div>
<div style="background-color:white;border: solid 1px #004360;float: 
left;width: 100%;">
<h6 *ngFor="let division2 of divisionList" class="pull-left col-
md-12" style="border-bottom:1px solid #999999;padding-top: 5px;">
<input style="float: left;margin-left:25px;" type="radio" 
name="choose2" id="third-select7">
<label for="third-select7" style="padding-right: 90px;white-
space: nowrap;">
</label></h6>

</div>
</div>
</ng-container>
</div>

<input type="file" name="image" (change)="getFile($event)" 
multiple="multiple" accept="image/*" ngModel #image="ngModel">
<div class="row col-md-12 col-sm-12 col-xs-12 " style="margin-top: 
70px; text-align: center;">
<div class="col-md-4 ">
</div>
<div class="col-md-4">
<button (click)="onSubmit(registerForm)" class="school-footer-
button17" routerLink="/dashboard/:id" style="margin: 
auto;">Submit</button>
</div>
<div class="col-md-4 ">
</div>
</div>
</form><!--== end form ==-->

If you need any more data, code or clarification kindly let me know.