Search code examples
angularvalidationngmodel

Getting error while validation status is sending null value eventhough i set values using ngModel in html file


My sql table has four columns. i'm trying to validate form and add record using api service and the code is as follows. i don't want validation for status checkbox. I only want to send checkbox value as "Y" if checked and "N" if unchecked.

Whereas, with the present code my status value is going null...do we need to bind ngmodel of status with validation ???

HTML file

<form [formGroup]="addTermForm" (ngSubmit)="onSubmit()">
                    
            <div>
                    <label style="padding-left: 15px;">Status:</label>
                    <span style="padding-left: 10px;"></span> 
                    <input type="checkBox" ngModel
       [ngModel]="addTermForm.get('Status').value=='Y'?true:false"
       (ngModelChange)="addTermForm.get('Status').setValue($event?'Y':'N')"
       [ngModelOptions]="{standalone:true}"
       [ngClass]="{'is-invalid': submitted && addTermForm.get('Status').errors}">
                    
            
                    <div *ngIf="submitted &amp;&amp; addTermForm.controls.status.errors" class="text-danger">
                    <div *ngIf="addTermForm.controls.status.errors">
                      Status is required
                    </div>
                    </div>
           </div>          
                    <br>
                    <br>
                                    
                  
                  </form>


Solution

  • Your are adding formControlName in the formGroup but not assigning any value in View.

    Though you have NgModel field but your not using it while doing the API call and it's recommended to use two different form approaches.

    So try to change the checkBox field like below

    In View:

    <input type="checkbox" formControlName="Status"
           (change)="statusValueChange($event)"
           [ngClass]="{'is-invalid': submitted && addTermForm.get('Status').errors}"> 
    

    In Template:

    private statusValueChange($event: any) {
      this.addTermForm.controls['status'].setValue($event.target.checked ? 'Y' : 'N');
    }
    

    Happy Coding.. :)