'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 |
|---|
