changing default value of ion-checkbox

Question

I have created a form which uses ion-checkboxes in angular, which when ticked submits "true" to the database, how do I submit the value of the box to the database, so for example in my list is Junior Groups, so I would like "Junior Groups" to appear in the database and not true. The form also sends an email so the recipient needs to know what the enquiry is interested in.

Code so far is:

html form:

<form [formGroup]="coachingform">
<ion-grid>
<ion-row>
<ion-col>
 <ion-item>
   <ion-label position="start">First Name</ion-label>
   <ion-input type="text" formControlName="firstname"></ion-input>
 </ion-item>
 <ion-item>
   <ion-label position="start">Last Name</ion-label>
   <ion-input type="text" formControlName="surname"></ion-input>
 </ion-item>
 <ion-item>
   <ion-label position="start">Email</ion-label>
   <ion-input type="email" formControlName="email"></ion-input>
 </ion-item>
 <ion-item>
  <ion-label position="start">Contact Number</ion-label>
  <ion-input type="tel" formControlName="telnumber"></ion-input>
</ion-item>
<ion-item>
  <ion-label position="start">What city are you based in?</ion-label>
<ion-input type="text" formControlName="location"></ion-input>
</ion-item>
<ion-list>
  <ion-label>What are you interested in?</ion-label>
  <ion-item *ngFor="let entry of form">
    <ion-label>{{entry.val}}</ion-label>
    <ion-checkbox slot="start" formControlName="interestedin"></ion-checkbox>
  </ion-item>
</ion-list>

then in the .ts file have the list as such:

export class CoachingenquiryPage implements OnInit {
coachingform: FormGroup
public form = [
{ val: 'Junior Groups', isChecked: true },
{ val: 'Adult Groups', isChecked: true },
{ val: 'Individual Lessons', isChecked: true },
{ val: 'Holiday Camps', isChecked: true },
];

any help would be hugely appreciated. many thanks

the updated .ts code is:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormBuilder, FormGroup, Validators, FormArray }    
from '@angular/forms'
import { HttpClient, } from '@angular/common/http';
import {  Router } from '@angular/router';

@Component({
selector: 'app-coachingenquiry',
templateUrl: './coachingenquiry.page.html',
styleUrls: ['./coachingenquiry.page.scss'],
})
export class CoachingenquiryPage implements OnInit {
coachingform: FormGroup
public options= [
{ val: 'Junior Groups', isChecked: true },
{ val: 'Adult Groups', isChecked: true },
{ val: 'Individual Lessons', isChecked: true },
{ val: 'Holiday Camps', isChecked: true },
];

constructor(private http: HttpClient, public fb: FormBuilder, private   
router: Router) { 
this.coachingform = this.fb.group({
  firstname: [''],
  surname: [''],
  email: [''],
  telnumber: [''],
  location: [''],
  interestedTopics: this.fb.array([]),

})
const control = this.coachingform.get("interestedTopics") as  
FormArray;
this.options.forEach(f => {
  const group = this.fb.group({
    interestedin: [f.isChecked]
  });
  control.push(group);
});
}

ngOnInit() {
this.coachingform = new FormGroup({
  firstname: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required]
  }),
  surname: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required]
  }),
  email: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required, Validators.email]
  }),
  telnumber: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required, Validators.pattern('[- +()0-9]  
 {11,}')]
  }),
  location: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required]
  }),
  interestedin: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required]
  }),
  })
}
onSubmitForm () {
var formData: any = new FormData();
formData.append("firstname",   
this.coachingform.get('firstname').value);
formData.append("surname", this.coachingform.get('surname').value);
formData.append("email", this.coachingform.get('email').value);
formData.append("telnumber", 
this.coachingform.get('telnumber').value);
formData.append("location", this.coachingform.get('location').value);
formData.append("interestedin",   
this.coachingform.get('interestedin').value);
this.http.post('https://www.parktennis.org/app/services/app-    
coachingenquiry.php', formData, {responseType: 'text'}).subscribe(() 
=> {
this.coachingform.reset();
this.router.navigate(['/','landing']);
  });

}
}

Answer 1

<ion-checkbox slot="start" formControlName="interestedin"></ion-checkbox>

This won't work. Because I think interestedin is just a FormControl of your coachingform FormGroup.

You need to use FormArray for handling arrays.

First, Add an 'FormArray' in your coachingform FormGroup like:

this.coachingform = this.builder.group({
    firstname: [null],
    surname: [null],
    ...
    interestedTopics: this.builder.array([])
});

Then, add new controls into the array for all of your options.

const control = this.coachingform.get("interestedTopics") as FormArray;
control.clear();
this.options.forEach(f => {
    const group = this.builder.group({
    interestedin: [f.isChecked],
    value: [f.val]
});
control.push(group);

Note: For convenience, I've renamed your checkbox options from form to options.

And finally, your ion-list will be:

<ion-list formArrayName="interestedTopics">
    <ion-label>What are you interested in?</ion-label>
    <ion-item *ngFor="let entry of options; let i=index" [formGroupName]="i">
        <ion-label>{{entry.val}}</ion-label>
        <ion-checkbox slot="start" formControlName="interestedin"></ion-checkbox>
     </ion-item>
</ion-list>

Working demo at StackBlitz.

Result:

Edit:

Remove the form related code from your constructor.

Change your ngOnInit() hook as:

ngOnInit() {
    this.coachingform = new FormGroup({
      firstname: new FormControl(null, {
        updateOn: "blur",
        validators: [Validators.required]
      }),
      surname: new FormControl(null, {
        updateOn: "blur",
        validators: [Validators.required]
      }),
      email: new FormControl(null, {
        updateOn: "blur",
        validators: [Validators.required, Validators.email]
      }),
      telnumber: new FormControl(null, {
        updateOn: "blur",
        validators: [Validators.required, Validators.pattern("[- +()0-9]{11,}")]
      }),
      location: new FormControl(null, {
        updateOn: "blur",
        validators: [Validators.required]
      }),
      interestedTopics: this.builder.array([])
    });
    const control = this.coachingform.get("interestedTopics") as FormArray;
    control.clear();
    this.options.forEach(f => {
      const group = this.builder.group({
        interestedin: [f.isChecked]
      });
      control.push(group);
    });
  }

To get selection options:

const controlValue = this.coachingform.get("interestedTopics").value;
const selectedOptions = controlValue
    .filter(f => f.interestedin)
    .map(m => m.value);