Does not update ngModel associated with the check box

<label class="checkiconImg bg-white">
<input type="checkbox"
[(ngModel)]="quoteSupplierCover.isShowInComparisonTool"
/>
<span class="geekmark ShowInComparisonToolCheckBox"
pTooltip="Please deselect this before you select other."
tooltipEvent="hover"
(click)="checkRemark(coverIndex, roundIndex)"
[tooltipDisabled]="!quoteSupplierCover.showWarningToolTip"></span>
</label>


This check box selects if the remarks given in the input (that is not given here) to be shown in a separate comparision tool. But before doing that we want to check if there is any other rounds that has a checked review, we want the user to uncheck that and check the current one that they wishes to show. But the problem is !hasComparisonToolSet comes true, kit does not update the isShowInComparisonTool to true that check the checkbox and geemark would be green.

checkRemark(quoteSupplierIndex, roundIndex) {
if (this.negotiationRounds[roundIndex] && this.negotiationRounds[roundIndex][1].quoteCoverageAssessments[quoteSupplierIndex]) {
try {
this.negotiationRounds[roundIndex][1].quoteCoverageAssessments[quoteSupplierIndex].isShowInComparisonTool = false;
} finally {
// Check other rounds for any that have the comparison tool set
const hasComparisonToolSet = this.negotiationRounds
.filter((_, idx) => idx !== roundIndex)
.some(round => {
const isShowInComparisonTool = round[1].quoteCoverageAssessments[quoteSupplierIndex]?.isShowInComparisonTool === true;
if (isShowInComparisonTool) {
round[1].quoteCoverageAssessments[quoteSupplierIndex].showWarningToolTip = true;
}
return isShowInComparisonTool;
});
if (!hasComparisonToolSet) {
// Reset values if no other round has it set
console.log("No other rounds with comparison tool set, resetting values.");
const assessment = this.negotiationRounds[roundIndex][1].quoteCoverageAssessments[quoteSupplierIndex];
assessment.isShowInComparisonTool = true;
assessment.showWarningToolTip = false;

if (assessment.remarks !== null && assessment.isShowInComparisonTool === true && assessment.remarksType === 0) {
this.showRemark = true;
}
}
}
}
}


I even tried to have (ngModelChange)="checkRemark(coverIndex, roundIndex)" in the checck box itself that would be something like this

<label class="checkiconImg bg-white">
<input type="checkbox"
[(ngModel)]="quoteSupplierCover.isShowInComparisonTool"
(ngModelChange)="checkRemark(coverIndex, roundIndex)" />
<span class="geekmark ShowInComparisonToolCheckBox"
pTooltip="Please deselect this before you select other."
tooltipEvent="hover"
[tooltipDisabled]="!quoteSupplierCover.showWarningToolTip"></span>
</label>


But here even though the model was updated, the checkbox was always checked, even thogh for that particular quoteSupplierCover.isShowInComparisonTool was false.

Continue reading...