在角度组件中使用 formGroup 绑定表单

问题描述

我在绑定表单时遇到以下错误

cart.component.html
<h3>Cart</h3>

<p>
  <a routerLink="/shipping">Shipping Prices</a>
</p>

<div class="cart-item" *ngFor="let item of items">
  <span>{{ item.name }} </span>
  <span>{{ item.price | currency }}</span>
</div>

<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">

    <div>
      <label for="name">
        Name
      </label>
      <input id="name" type="text" formControlName="name">
    </div>
  
    <div>
      <label for="address">
        Address
      </label>
      <input id="address" type="text" formControlName="address">
    </div>
  
    <button class="button" type="submit">Purchase</button>
  
  </form>

cart.component.ts

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

import { CartService } from '../cart.service';

@Component({
  selector: 'app-cart',templateUrl: './cart.component.html',styleUrls: ['./cart.component.css']
})
export class CartComponent {
  items = this.cartService.getItems();
  checkoutForm = this.formBuilder.group({
    name: '',address: ''
  });
  constructor(
    private cartService: CartService,private formBuilder: FormBuilder,) {}

  onSubmit(): void {
    // Process checkout data here
    this.items = this.cartService.clearCart();
    console.warn('Your order has been submitted',this.checkoutForm.value);
    this.checkoutForm.reset();
  }
}

错误： 编译失败。

src/app/cart/cart.component.html:12:7 - 错误 NG8002：无法绑定到“formGroup”，因为它不是“form”的已知属性。

12

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/cart/cart.component.ts:8:16 8 templateUrl: './cart.component.html',~~~~~~~~~~~~~~~~~~~~~~~~ 组件 CartComponent 的模板出错。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）