My checkbox value is not getting unchecked on click while retrieving data from service using API and ngModel

Question

This is my code.. On edit page, i'm retrieving data from service using ngModel. My sql table has four columns: Rulename, Delaer_Id, Type and Status. i'm trying to validate form and update record using api service and the code is as follows. i don't want validation for status checkbox. I only want to change status checkbox value to "N" by unchecking the checkbox. On clicking the checkbox value N is reflected in console. But, checkbox is not getting unchecked. it is remaining checked only. I want it to be toggled onclickk just like it's value (checked if "Y" and unchecked if "N").

HTML FILE

 <form [formGroup]="addTermForm">
             
                       <div class="col-sm-12">  
                        <label style="padding-left: 6px;">Status:</label>
                        <span style="padding-left: 10px;"></span>  
                        <input type="checkbox" formControlName="Status"
           (change)="statusValueChange($event)" style="margin-left: 10px;" [(ngModel)]="termDetails.Status"
          [ngClass]="{'is-invalid': submitted && addTermForm.get('Status').errors}">                        
                    

                     </div>
                          
                      
         </form>

TS FILE

 
   statusValueChange($event: any) {
    this.addTermForm.controls['Status'].setValue($event.target.checked ? 'Y' : 'N');
    console.log('form values:', this.addTermForm.value);
  }

Answer 1

Remove the below attributes from your checkbox and it will work.

formControlName="Status"
[(ngModel)]="termDetails.Status"

As you are updating the form Values manually you don't need this.

To show the check/uncheck based on value while editing. you can do below this.

 [checked]="myForm.get('Status').value == 'Y'"

use the checked attribute and when you recevied the data on editing update the field value like below.

this.myForm.get("Status").setValue("Y");