Angular10: Getting blank values in database after form submitting

Question

I am working in angular project where i am trying to insert form data into my database through the user. For the database purpose i am using microsoft sql server mamangment All things are working fine. no errros are showing in vs code and console.

The prolem is that after submiting the form Blank values are getting in my database only id is incrementing or you can see here what is happening

this is my source code on github. you can check

As i have found some similar questions but it didn't help me.

care.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const baseUrl = 'http://localhost:53367/api/reports';


@Injectable({
  providedIn: 'root'
})
export class CareService {

  constructor(private http: HttpClient) { }

  getAll(): Observable<any> {
    return this.http.get(baseUrl);
  }

  get(id): Observable<any> {
    return this.http.get(`${baseUrl}/${id}`);
  }

  create(data): Observable<any> {
    return this.http.post(baseUrl, data);
  }

  update(id, data): Observable<any> {
    return this.http.put(`${baseUrl}/${id}`, data);
  }

  delete(id): Observable<any> {
    return this.http.delete(`${baseUrl}/${id}`);
  }

  deleteAll(): Observable<any> {
    return this.http.delete(baseUrl);
  }

  findByTitle(title): Observable<any> {
    return this.http.get(`${baseUrl}?title=${title}`);
  }
  

 

}

report.comonent.ts

import { Component, OnInit } from '@angular/core';
import {CareService} from 'src/app/services/care.service';

@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.css']
})
export class ReportComponent implements OnInit {

  report = {
    name:'',
    email:'',
    date:'',
    age:'',
    mobile:'',
    result:'',
  };
  submitted = false;

  constructor(private careservice: CareService ) { }

  ngOnInit(): void {
  }

  savereport(): void {
    const data = {
      name: this.report.name,
      email:this.report.email,
      date:this.report.date,
      age:this.report.age,
      mobile:this.report.mobile,
      result:this.report.result
    };

    this.careservice.create(data)
      .subscribe(
        response => {
          console.log(response);
          this.submitted = true;
        },
        error => {
          console.log(error);
        });
  }

  newTutorial(): void {
    this.submitted = false;
    this. report = {
      name:'',
      email:'',
      date:'',
      age:'',
      mobile:'',
      result:'',
    };
  }

}

report.comonent.html

<form>
            <fieldset>
                <span style="font-size: 20px;" class="badge badge-info ">Create your Medical Report::</span>
            
              <div class="form-group">
                <label class="col-form-label" for="inputDefault">Name::</label>
                <input
                type="text"
                class="form-control"
                id="name"
                required
                [(ngModel)]="report.name"
                name="name"
                placeholder="Enter your name"
              />
              </div>

              <div class="form-group">
                <label class="col-form-label" for="inputDefault">Email::</label>
                <input
                type="text"
                class="form-control"
                id="email"
                required
                [(ngModel)]="report.email"
                name="email"
                placeholder="Enter your name"
              />
              </div>

              <div class="form-group">
                <label class="col-form-label" for="inputDefault">date::</label>
                <input
                type="text"
                class="form-control"
                id="date"
                required
                [(ngModel)]="report.date"
                name="date"
                placeholder="Enter your name"
              />
              </div>

              <div class="form-group">
                <label class="col-form-label" for="inputDefault">Age::</label>
                <input
                type="text"
                class="form-control"
                id="age"
                required
                [(ngModel)]="report.age"
                name="age"
                placeholder="Enter your name"
              />
              </div>

              <div class="form-group">
                <label class="col-form-label" for="inputDefault">Mobile Number::</label>
                <input
                type="text"
                class="form-control"
                id="mobile"
                required
                [(ngModel)]="report.mobile"
                name="mobile"
                placeholder="Enter your name"
              />
              </div>

              <div class="form-group">
                <label for="exampleTextarea">Your Diagnoised Result::</label>
                <input
                type="text"
                class="form-control"
                id="result"
                required
                [(ngModel)]="report.result"
                name="result"
                placeholder="Enter your name"
              />
              </div>
            
              <button  (click)="savereport()" type="button" class="btn btn-primary btn-lg">Submit</button>
              <button type="reset" class="btn btn-danger btn-lg ml-1">Reset</button>
            </fieldset>
          </form>

Please help,,...Thankyou

Answer 1

This is your action method in your controller :

[ResponseType(typeof(report))]
public IHttpActionResult Postreport(report report)

And this is how you call that service in your client

create(data): Observable<any> {
    return this.http.post(baseUrl, data);
  }

There is no method on your controller marked with a HttpPost attribute. So you are probably getting a 404 response. And you also need to modify your parameter with [FromBody] attribute For posting data you need to change your method into this :

[ResponseType(typeof(report))]
[HttpPost]
public IHttpActionResult Postreport([FromBody]report report)

Also, need to mention that you need to do the same thing for other HTTP verbs (put, delete, etc.)