'Can't toggle checkbox on nested formgroup

Here is my form:

this.form = this.formBuilder.group({
  companyName: [null, Validators.required],
  shipper: null,
  shippers: this.formBuilder.array([], Validators.required),
  dataLimit: [50000, Validators.required],
  playerLimit: [20, Validators.required],
});

I want to add multiples shippers to my form and each we have to select options for each shipper. So if you add a shipper it create a formgroup like that:

  const formGroup = this.formBuilder.group({
    shipperName: [company],
    offers: this.formBuilder.array(
      [true, true, this.formBuilder.control({ value: false, disabled: true })],
      atLeastOneCheckbox(1)
    ),
  });

  (<FormArray>this.form.get('shippers')).push(formGroup);

And here is my template:

<div class="form-group">
    <ul class="fit-content">
      <li *ngFor="let shipper of form.get('shippers').value; let shipperIndex = index" formArrayName="shippers">
        <div class="d-flex justify-content-between align-items-center font-weight-bold">
          {{ shipper.shipperName }}
          <div class="ml-3" [formGroupName]="shipperIndex">
            <div
              class="custom-control custom-checkbox d-inline-block mr-2"
              formArrayName="offers"
              *ngFor="let offer of offers; let offerIndex = index"
            >
              <input
                class="custom-control-input"
                [id]="'offer_' + offerIndex"
                type="checkbox"
                [formControlName]="offerIndex"
              />
              <label class="custom-control-label font-weight-normal" [for]="'offer_' + offerIndex" translate>{{
                offer
              }}</label>
            </div>
          </div>

          <button class="btn float-right" (click)="removeCompany(shipperIndex)">
            <i class="fa fa-times text-danger"></i>
          </button>
        </div>
      </li>
    </ul>
  </div>

I don't know why but every click is not working, I can't even click on the removeCompany() button. Every formGroupName/formArrayName/etc seems good to me.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source