Angular 6：无法绑定到“FormGroup”，因为它不是“form”的已知属性

Question

我是 Angular 6 的新手，正在研究 ReactiveForms。 得到这个错误并且无法编译。 我已经看到了不同的解决方案，并按照解决方案中的建议在 Imports 中添加了 ReactiveFormsModule 指令，但它仍然显示相同的错误。 请帮忙。

与您分享所需的代码和错误截图。 app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SignupFormComponent } from './signup-form/signup-form.component';
import { AuthorsService } from './authors.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent,
    SignupFormComponent,
    CoursesComponent,
    CourseComponent,
    AuthorsComponent,
    FavoriteComponent,
    TitleCasePipe,
    PanelComponent,
    LikeComponent,
    ZippyComponent,
    ContactFormComponent,
    NewCourseFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],

注册表单.ts

import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.css']
})
export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl(),
    password: new FormControl()
  });

}

注册表格.html

<form [FormGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input 
            formControlName="username"
            id="username" 
            type="text" 
            class="form-control">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input 
            formControlName="password"
            id="password" 
            type="text" 
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

错误截图

Answer 1

请使用以下 HTML

<form [formGroup]="form">
...
</form>

由于您在 [formGroup] 中使用大写 F，因此存在错误。

Answer 2

正如@srashtisj 和@suresh-kumar-ariya 所提到的，您必须将 HTML 表单中的约定从FormGroup更新为formGroup ，并且一切都应该正常工作。

FormGroup跟踪表单控件集合的相同值和状态。

在Angular 的官方表单指南中了解有关创建表单实例的更多信息。

Answer 3

问题与 [FormGroup] 有关，请使用 [formGroup]。 创建了一个stackblitz https://stackblitz.com/edit/angular-xbp9fc

Answer 4

您可以使用 FormBuilder 作为这个

import { Validators, FormBuilder, FormGroup, FormControl , ReactiveFormsModule } from '@angular/forms';
constructor(private builder: FormBuilder){}

 public complexForm: FormGroup = this.builder.group({
  'firstname' : '',
  'lastname': '',
});

在 HTML 中

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">

 <div class="form-group" >
       <label>First Name:</label>
       <input class="form-control" type="text" placeholder="John" [formControl]="complexForm.controls['firstName']">
  </div>
</form>

Answer 5

在您的app.module.ts包含ReactiveFormsModule所有指令，这些指令使用formGroup等。

它们在这个模块中定义。