类型“FormGroup”上不存在属性“ItemID”

Question

我知道这是一个重复的问题，但我找不到我的问题的解决方案。

services.ts 文件

import { Injectable } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

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

  constructor(private fb:FormBuilder, private http:HttpClient) { }
  readonly BaseURL='http://localhost:47522/api/';
  itemModel = this.fb.group({
    ItemID: [''],
    ItemName: [''],
    ItemPrice: ['']
  });

  postItemDetails(){
    var itemData = {
      ItemID: this.itemModel.value.ItemID,
      ItemName: this.itemModel.value.ItemName,
      ItemPrice: this.itemModel.value.ItemPrice
    };

    return this.http.post(this.BaseURL + '/Item/AddItem', itemData);
  }
}

componet.ts 文件

import { Component, OnInit } from '@angular/core';
import { ItemDetailService } from 'src/app/shared/item-detail.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-item-detail',
  templateUrl: './item-detail.component.html',
  styles: [
  ]
})
export class ItemDetailComponent implements OnInit {

  constructor(private service:ItemDetailService) { }

  ngOnInit(): void {
    this.service.itemModel.reset();
  }

  onSubmit(form:NgForm){
    
    //alert('clicked');
    this.service.postItemDetails().subscribe(
      res => {
        this.service.itemModel.reset();
      },
      err => {
        console.log(err)
      }
    )
  }
}

html文件

<form  #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">
    <input type="hidden" name="ItemID" [value]="service.itemModel.ItemID">
    <div class="form-group">
        <input name="ItemName" #ItemName="ngModel" [(ngModel)]="service.itemModel.ItemName" class="form-control"
            placeholder="Item Name" required minlength="3" maxlength="25">
    </div>
    <div class="form-group">
        <input name="ItemPrice" #ItemPrice="ngModel" [(ngModel)]="service.itemModel.ItemPrice" class="form-control"
            placeholder="Item Price" required>
    </div>
    <div class="form-group">
        <button class="btn btn-success btn-lg btn-block" required type="submit" [disabled]="form.invalid"><i
                class="fas fa-database"></i> Submit</button>
    </div>
</form>

这些是我的文件。当我调试我的 API 时，返回的值为 null。并且控制台不断向我显示错误 Property 'ItemID' does not exist on type 'FormGroup'。

Answer 1

您正在混合使用模型驱动的表单（使用 formBuilder 定义的表单）和模板驱动的表单（使用 ngModel 更改值）。您应该关注官方文档中解释的解决方案之一。

关于您的错误，您不能只使用 service.itemModel.ItemId 访问 FormGroup 控件的值。

您应该将您的 formGroup 更改为一个基本对象，以便能够使用 ngModel 更改其值，或者在模板中添加响应式表单指令来管理您的表单。

Answer 2

试试这样 service.ts

import { Injectable } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ItemDetailService {
  constructor(private fb: FormBuilder, private http: HttpClient) { }
  readonly BaseURL = 'http://localhost:47522/api/';
  initForm() {
    return this.fb.group({
      ItemID: [''],
      ItemName: [''],
      ItemPrice: ['']
    });
  }

  postItemDetails(itemData) {
    return this.http.post(this.BaseURL + '/Item/AddItem', itemData);
  }
}

component.ts

import { Component, OnInit } from '@angular/core';
import { ItemDetailService } from './item.service';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})
export class ItemComponent implements OnInit {
itemForm: FormGroup;
 constructor(private service:ItemDetailService) { }
  
  ngOnInit(): void {
    this.itemForm = this.service.initForm();
  }

  onSubmit(){
    
    //alert('clicked');
       this.itemForm.reset();
    this.service.postItemDetails(this.itemForm.value).subscribe(
      res => {
      },
      err => {
        console.log(err)
      }
    )
  }

}

component.html

<form  [formGroup]="itemForm" (ngSubmit)="onSubmit()">
    <input type="hidden" name="ItemID" formControlName="ItemID">
    <div class="form-group">
      <input name="ItemName" formControlName="ItemName"  class="form-control"
            placeholder="Item Name" required minlength="3" maxlength="25">
    </div>
    <div class="form-group">
        <input name="ItemPrice"  formControlName="ItemPrice"  class="form-control"
            placeholder="Item Price" required>
    </div>
    <div class="form-group">
        <button class="btn btn-success btn-lg btn-block" type="submit" [disabled]="itemForm.invalid"><i
                class="fas fa-database"></i> Submit</button>
    </div>
</form>