使用 API 和 ngModel 从服务中检索数据时，我的复选框值不会在单击时取消选中

Question

这是我的代码.. 在编辑页面上，我正在使用 ngModel 从服务中检索数据。我的 sql table 有四列：规则名称、Delaer_Id、类型和状态。我正在尝试使用 api 服务验证表单和更新记录，代码如下。我不想验证状态复选框。我只想通过取消选中复选框将状态复选框值更改为“N”。单击复选框时，值 N 会反映在控制台中。但是，复选框并没有被取消选中。它仅保持选中状态。我希望它像它的值一样在 onclickk 上切换（如果是“Y”则选中，如果“N”则取消选中）。

HTML 文件

 <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 文件

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

Answer 1

从您的复选框中删除以下属性，它将起作用。

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

当您手动更新表单值时，您不需要这个。

编辑时根据值显示check/uncheck。你可以在下面做。

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

使用选中的属性，当您收到编辑数据时更新字段值，如下所示。

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

使用 API 和 ngModel 从服务中检索数据时，我的复选框值不会在单击时取消选中

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

checkbox

service

ngmodel

angular