Error while posting data (Post request) in Asp.Net Core Web API with Angular 9

Question

I am getting an error in post request in Angular. I am using Bootstrap data-toggle modal for a popup

Data HTML: Parent: When i click botton onEdit(), the popup window open by displaying Edit Html page.

<tr *ngFor="let data of recData">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.division}}</td>
<td>{{data.total2}}</td>
<td>
   <button class="btn btn-primary small btn-sm mr-1" (click)="onEdit()" //<-- How to pass Id 
            data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-pencil-alt"></i>
    </button>
</td>

Data TS:

onEdit(){
  this.dialog.open(EditCollComponent);
}

Edit HTML: Child It is a popup window in Data.html

<form [formGroup]="editCollectionForm" autocomplete="off" (submit)="onSubmit()">
    <div class="form-row">
        <div class="form-group col-md-12">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">ID</span>
                </div>
                <input type="number" formControlName="Id"  class="form-control" style="background- 
                         color:rgb(255, 159, 128);" required >
            </div>
        </div>
        <div class="form-group col-md-6">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i
                            class="fa fa-calander mr-1"></i>User Name</span>
                </div>
                <input type="text"  formControlName="Name"  class="form-control">
            </div>
        </div>
        <div class="form-group col-md-6">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i
                            class="fa fa-calander mr-1"></i>Date</span>
                </div>
                <input type="date" formControlName="PostDateTime"   class="form-control">
            </div>

            //etc..

        </div>
     </div>
     <div class="form-row">
        <div class="form-group col-md-6">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i
                            class="fa fa-calander mr-1"></i>Net Amount</span>
                </div>
                <input type="number"  formControlName="Total2"   class="form-control" readonly>
            </div>
        </div>
     </div>
    <div class="modal-footer">
        <button type="reset" class="btn btn-secondary" >Reset</button>
        <button type="submit" class="btn btn-primary">Update changes</button>
    </div>
  </form>

Edit ts:

 ngOnInit(): void {
 this.editCollectionForm = this.fb.group(
  {
    Id:null,
    PostDateTime:null,
    Division:null,
    Name:null,
    NetCash:null,
    CellPay2:null,
    Card2:null,
    PhonePay2:null,
    Ecom2:null,
    Other2:null,
    Total2:null,
  });
}

 onSubmit(){
  console.log(this.editCollectionForm.value);
  this.salesService.editData(this.editCollectionForm.value).subscribe(
   (res: any) => {
     console.log(this.editCollectionForm.value);
     this.editSalesColl = res;
     console.log(this.editSalesColl);   
   },
   err => {
    if (err.status == 400)
      this.toastr.error('Invalid User Input !!', 'Authentication failed.');
    else
      this.toastr.error('Network error', 'Authentication failed.');
      //this.loadSpinner.hide();
    }
  );
}

Service ts: data:EditsalesClass is class

    editData(data:EditsalesClass){ 
     return this.http.post('https://localhost:44372/api/Report/EditSalesCollection', data);
  }

Its a post method

When i send data from Postman it works 200 Ok but not worked with angular form (Error:POST https://localhost:44372/api/Report/EditSalesCollection 400) Why i am not able to send data in Controller in asp.net core web api but It works in Postman. Any thing is wrong with this code?? Please help me to solve this..

I am using Sql Procedure to update data..

Updated:

Answer 1

How can i pass id after click in edit button?? See above code in Data html..

First, you can add the id to the button attribute data_id,and pass $event to the onEdit function:

 <button class="btn btn-primary small btn-sm mr-1" (click)="onEdit($event)" 
         id="{{data.id}}"    data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-pencil-alt"></i>
    </button>

Data TS:

onEdit(event){
   var target = event.target || event.srcElement || event.currentTarget;
   var idAttr = target.attributes.id;
   var value = idAttr.nodeValue;  // here is the id value 
   
   this.dialog.open(EditCollComponent);
}

Here is the debug result: