Angular 6:无法绑定到“FormGroup"，因为它不是“form"的已知属性 [英] Angular 6: Can't bind to 'FormGroup' since it isn't a known property of 'form'

问题描述

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

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';import { SignupFormComponent } from './signup-form/signup-form.component';从 './authors.service' 导入 { AuthorsService };从'@angular/platform-b​​rowser' 导入 { BrowserModule };从'@angular/core' 导入 { NgModule };@NgModule({声明: [应用组件，注册表格组件，课程组件，课程组件，作者组件，最喜欢的组件，TitleCasePipe，面板组件，像组件一样，Zippy组件，联系表单组件，新建课程表单组件],进口:[浏览器模块，表单模块，响应式表单模块],

Signup-form.ts

import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';从@angular/core"导入{组件}；@成分({选择器:'注册表单'，templateUrl: './signup-form.component.html',styleUrls: ['./signup-form.component.css']})导出类 SignupFormComponent {表单 = 新表单组({用户名:new FormControl(),密码:new FormControl()});}

signup-form.html

<div class="form-group"><label for="username">用户名</label><输入formControlName="用户名"id="用户名"类型=文本"class="表单控件">

<div class="form-group"><label for="password">密码</label><输入表单控件名称=密码"id="密码"类型=文本"class="表单控件">

<button class="btn btn-primary" type="submit">注册</button></表单>

错误截图

解决方案

请使用下面的 HTML

...</表单>

错误存在，因为您在 [formGroup] 中使用大写 F.

I am new to Angular 6 and working on ReactiveForms. Getting this error and unable to compile. I have seen the different solutions and Added the ReactiveFormsModule directive in Imports as suggested in solutions still it is showing the same error. Please Help.

Sharing you the desired code and screenshot of the error. 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
  ],

Signup-form.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()
  });

}

signup-form.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>

Error Screenshot

解决方案

Please use below HTML

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

The error is there since you are using capital F in [formGroup].

这篇关于Angular 6:无法绑定到“FormGroup"，因为它不是“form"的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！