Angular10：提交表单后在数据库中获取空白值

问题描述

我在angular项目中工作，我试图通过用户将表单数据插入数据库。出于数据库目的，我正在使用microsoft sql server mamangment一切正常。 vs代码和控制台中没有显示错误。

问题是，提交表单后，空白值进入我的数据库，只有id递增，否则您可以看到here发生了什么

这是我在github上的源代码。您可以检查

我发现了一些类似的问题，但这并没有帮助我。

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:'',};
  }

}

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>

请帮助，， ...谢谢

解决方法

这是您在控制器中的操作方法：

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

这就是您在客户端中调用该服务的方式

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

控制器上没有标记有HttpPost属性的方法。因此，您可能会收到404响应。而且，您还需要使用[FromBody]属性修改参数。要发布数据，您需要将方法更改为此：

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

另外，需要提及的是，您需要对其他HTTP动词（输入，删除等）执行相同的操作