sending Angular 6 form including checkbox values not working with template driven forms

Question

I'm trying to pass form values including checkboxes in angular 6 forms using formbuilder but I'm unable to read the value from checkbox. I am getting all the values from all the other input fields but only checkbox is not responding Here is my code:

<form [formGroup]="myGroup" (submit)="submit(myGroup.value)">
    <div class="row">
      <div class="col-sm-4" *ngFor="let info of myGroup.controls['myInfo'].controls; let i = index">

            <label for="{{labelValue[i].name}}"> {{labelValue[i].label}}
            <input type="{{labelValue[i].type}}" class="{{labelValue[i].class}}" [formControl]="info">
          </label>

      </div>
    </div>

<div class="row">
  <button class="form-control btn-sub" type=”submit”>
    Submit Details
  </button>
</div>

My component class:

import { ProposalService, CustomerDetails, ProposalNumber } from 'src/app/Services/Proposal-service/proposal.service';

export interface InputType{
  name:string;
  type: string;
  label: string;

  class:string;
}
export class ProposalComponent implements OnInit {

  public labelValue: InputType[] = [
  {name:"fname",type:"text",label:"First Name", class:"form-control"},
  {name:"form60",type:"checkbox",label:"Is Collection Of form 60", class:"form-control"},
  {name:"eia-num",type:"number",label:"EIA Number", class:"form-control"}
];
  title = "Customer Details";
  details: Observable<CustomerDetails>;
  pNumber: ProposalNumber ;

  public information: CustomerDetails[] = [
    {name:"First Name", value:""},//
 {name:"IsCollectionOfform60", value:true},
    {name:"EIA Number", value:""}
  ];

  myGroup : FormGroup;

  constructor(private formBuilder: FormBuilder,
   private _proposalService: ProposalService) { }

  ngOnInit() {

  this.myGroup = this.formBuilder.group({
    myInfo: this.constructFormArray()
  });

  this.pNumber = <ProposalNumber>{proposalNumber: 0 ,message:"", status: ""};

  } 


  constructFormArray()
  {
    const arr = this.information.map(cat => {
      return this.formBuilder.control(cat.value);
    });
    return this.formBuilder.array(arr);

  }


  submit(form){
    //this.loading = true;
    console.log(form);
    let mySelectedAddon = form.myInfo.map((currentValue,i)=> {
      return { "name" : this.information[i].name , "value" : currentValue} 
      }
    );
    console.log(mySelectedAddon);
    this._proposalService.loadCustomer(mySelectedAddon).subscribe((res: ProposalNumber) =>{
      //this.loading = false;
        console.log(res);
        this.pNumber.proposalNumber = res.proposalNumber;
        this.pNumber.message = res.message;
        console.log(this.pNumber.proposalNumber);
        return this.myGroup.value;
  });
}
}

Answer 1

You need to use the 'change' event and pass the respective input value and event to a method onChange where you check if it's checked, then add the respective value to the formarray, if it's unchecked, remove the chosen email from the form array.

You can refer the below link:

https://stackblitz.com/edit/angular-rskaug?file=src%2Fapp%2Fapp.component.ts

Above example is useful to get the values of checkbox dynamically.