[Solved] Angular Reactive Form Error: The JSON value could not be converted to System.Int32

Hi,

I am using reactive form in angular. In this form, I am sending a request to the API. But I am getting select value and it gives an error. How can I resolve this error.

Error : "The JSON value could not be converted to System.Int32. Path: $.OperationClaimId | LineNumber: 0 | BytePositionInLine: 34."

{  
    "UserId": 74,  
    "OperationClaimId": "1"  
}  

addClaims(val : any){  
    var headers = new HttpHeaders({  
        'Content-Type': 'application/json',  
        'Authorization': 'Bearer ' + localStorage.getItem('token')  
    });
  
    return this.http.post<any>(this.AddClaimsAPI, val, {headers: headers})  
} 

SaveClaims(){       
   this.service.addClaims(this.UserClaimsEdit.value).subscribe(res=>{      
      this.UserClaimsEdit.reset();  
   });  
  
   console.log(this.UserClaimsEdit.value);  
} 

<form [formGroup]="UserClaimsEdit" (ngSubmit)="SaveClaims()">  
    <div class="card-body">  
        <div class="form-group">  
            <label for="exampleInputEmail1">Customer Code</label>  
            <input type="email" class="form-control" [readonly]="true"   formControlName="UserId" placeholder="UserId">      
            <span class="error" style="color: red; font-weight: bold;" *ngIf="UserClaimsEdit.controls['UserId'].hasError('required')   
                && UserClaimsEdit.controls['UserId'].touched">Zorunlu</span>  
        </div>  
        <div class="form-group">  
            <label for="exampleInputEmail1">Yetki</label>
            <input type="email" class="form-control"   formControlName="OperationClaimId" placeholder="UserId">      
        </div>   
    </div> 
    <div class="modal-footer justify-content-between">  
        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>  
        <button type="submit" class="btn btn-primary float-right">Kaydet       
        </button>  
    </div>  
</form>