I am currently facing an issue with validating a group of checkboxes. The main problem is that even though the 'this.dataService.minRequired' variable updates in the service, the validation state does not reflect these changes. I initially thought moving it to the service would solve the problem, but it persisted regardless of whether the variable was in the controller or service.
The checkboxes I am using do not have a 'checked' value or any other way to access their state directly. This limitation has led me to explore various workarounds, and I need to find a solution within these constraints.
card.component.html:
<xyz-checkbox-group orientation="vertical" ngDefaultControl [formControl]="newCardForm.get('eligibility')">
<div style="float: left; width: 45%;">
<xyz-checkbox ngDefaultControl [(checked)]="checkedFlag1" id="checkbox1" (change)="checker()">Account is Open and in Good Standing</xyz-checkbox>
<xyz-checkbox ngDefaultControl [(checked)]="checkedFlag2" id="checkbox2" (change)="checker()">Balance Less Than 30 Days Past Due</xyz-checkbox>
<xyz-checkbox ngDefaultControl [(checked)]="checkedFlag3" id="checkbox3" (change)="checker()">Annual Income - $200,000.00 (minimum)</xyz-checkbox>
<xyz-checkbox ngDefaultControl [(checked)]="checkedFlag4" id="checkbox4" (change)="checker()">Current Card Limit - $5,000.00</xyz-checkbox>
<display-error *ngIf="(submitted && newCardForm.get('eligibility').invalid) || (submitted && newCardForm.get('eligibility').invalid && newCardForm.get('eligibility').dirty) || (submitted && newCardForm.errors.checks)"
error="Only 'Client is a Student' is optional." class="alertLabel"></display-error>
card.component.ts:
checkedFlag1: boolean;
checkedFlag2: boolean;
checkedFlag3: boolean;
checkedFlag4: boolean;
ngOnInit() {
this.forms = new FormArray([
this.accountDetailsForm = new FormGroup({
productGroup: new FormControl('', {validators: Validators.required}),
}),
this.newCardForm = new FormGroup({
address: new FormControl('', {validators: Validators.required}),
eligibility: new FormControl('', {validators: Validators.required})
}, this.validateCheckboxes(this.dataService.minRequired)),
]);
}
public checker(){
let checked = 0;
this.checkboxArray = [];
this.checkboxArray.push(
this.checkedFlag1, this.checkedFlag2, this.checkedFlag3, this.checkedFlag4
)
for(let i = 0; i < this.checkboxArray.length; i++){
if(this.checkboxArray[i] == true){
checked++;
}
}
if (checked === 4) {
this.dataService.minRequired = true;
} else {
this.dataService.minRequired = false;
}
}
public validateCheckboxes(flag): ValidatorFn{
return function validate (formGroup: FormGroup){
console.log("entered with: " + flag)
if(!flag){
return {
checks: true
};
}
return null;
}
}