无法在角度 10 中绑定到“FormGroup”答案

【问题标题】：Can't bind to 'FormGroup' in angular 10无法在角度 10 中绑定到“FormGroup”
【发布时间】：2021-08-11 20:43:28
【问题描述】：

我是 Angular 的新手。我在 CCCComponent.ts 文件中创建了一个 FormGroup 'addLoanForm'。我有一个模块，“Contacts.Module.ts”，我已在其中导入 ReactiveFormsModule 和 FormsModule

我不断收到错误消息：无法绑定到“FormGroup”，因为它不是“form”的已知属性。

**Module.ts**

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule,FormsModule } from '@angular/forms';
import { CCCComponent } from './ccc/ccc.component';

@NgModule({
  declarations: [
    CCCComponent
  ],
  imports: [
    CommonModule,ReactiveFormsModule,FormsModule
  ]
})
export class ContactsModule { }

component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-ccc',
  templateUrl: './ccc.component.html',
  styleUrls: ['./ccc.component.scss']
})
export class CCCComponent implements OnInit {

  addLoanForm : FormGroup;
  constructor() {
    this.addLoanForm=new FormGroup({
      'loanName':new FormControl()
    })
   }
   
  ngOnInit(): void {
  }

}

html 文件

<p>ccc works!</p>
<form [FormGroup] = "addLoanForm">
    <input type="text" formControlName="loanName">
</form>

app-routing.module

import { Component, NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CCCComponent } from './contacts/ccc/ccc.component';

const routes: Routes = [{path : 'contact',component:CCCComponent}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

错误信息

Error: src/app/contacts/ccc/ccc.component.html:2:7 - error NG8002: Can't bind to 'FormGroup' since it isn't a known property of 'form'.

2 <form [FormGroup] = "addLoanForm">
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/contacts/ccc/ccc.component.ts:5:16
    5   templateUrl: './ccc.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CCCComponent.

【问题讨论】：

你试过[formGroup]（没有大写f）吗？
指令选择器是formGroup，而不是FormGroup。
formGroup 应在 HTML 中以小写“f”开头：[formGroup]=“addLoanForm”
我已经对 html 文件进行了更改，但仍然出现相同的错误消息：无法绑定到“formGroup”，因为它不是“form”的已知属性。

标签： angular

【解决方案1】：

它应该是 formGroup，根据您的 html 模板中的 angular 10 文档 FormGroupDirective，但在较新的版本中是相同的：

<p>ccc works!</p>
<form [formGroup] = "addLoanForm">
    <input type="text" formControlName="loanName">
</form>

【讨论】：

【解决方案2】：

错误意味着 angular 找不到名为 FormGroup 的属性。尝试 [formGroup] 而不是 [FormGroup] 与 f 而不是 F 也许它会工作 ;)

【讨论】：