未捕获的错误:模板解析错误:无法绑定到“FormGroup”,因为它不是“form”的已知属性

Posted

技术标签:

【中文标题】未捕获的错误:模板解析错误:无法绑定到“FormGroup”,因为它不是“form”的已知属性【英文标题】:Uncaught Error: Template parse errors: Can't bind to 'FormGroup' since it isn't a known property of 'form' 【发布时间】:2018-03-01 15:17:25 【问题描述】:

我正在尝试在angular 4 中进行表单绑定。下面是我的代码。app.component.ts

import  Component, Input, OnChanges, SimpleChange, OnInit  from '@angular/core';
import  FormGroup, FormControl  from '@angular/forms';


@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent implements OnInit 

  form: FormGroup;
  ngOnInit() 
      this.form = new FormGroup(
        firstname: new FormControl('First Name'),
        lastname: new FormControl(''),
        languages: new FormControl('')
      );
    

  onSubmit = function(user) 
    console.log(user);
  ;
  

app.module.ts

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  BrowserModule  from '@angular/platform-browser';
import  RouterModule  from '@angular/router';
import  FormsModule, ReactiveFormsModule  from '@angular/forms';
import  AppComponent  from './app.component';
import  ProductComponent  from './product/product.component';
import  MemberComponent  from './member/member.component';
import  ItemListComponent  from './item-list/item-list.component';
import  SortPipe  from './app.sort';

@NgModule(
  declarations: [
    SortPipe,
    AppComponent,
    ProductComponent,
    MemberComponent,
    ItemListComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  bootstrap: [AppComponent],
)
export class AppModule  

app.component.html

<form [FormGroup]="form" (ngSubmit)="onSubmit(form.value)">
    <input type="text" placeholder="firstname" name="firstname" formControlName="firstname" />
    <br>
    <input type="text" placeholder="lastname" name="lastname" formControlName="lastname" />
    <br>
    <select name="languages" formControlName="languages">
        <option value="C++">C++</option>
        <option value="Java">Java</option>
        <option value="Angular">Angular</option>
    </select>
    <br><br>
    <input type="submit" value="submit" />
</form>

但我收到以下错误

未捕获的错误:模板解析错误: 无法绑定到“FormGroup”,因为它不是“form”的已知属性。 (" --> ][FormGroup]="form" (ngSubmit)="onSubmit(form.value)"> ) 在 JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:26882) 在 compiler.es5.js:26769 在 Object.then (compiler.es5.js:1679) 在 JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26768) 在 JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26697)

【问题讨论】:

【参考方案1】:

看来你打错了。

应该是 formGroup 而不是 FormGroup:

<form [formGroup]="form"

因为FormGroupDirective 看起来像:

@Directive(
  selector: '[formGroup]', 
  ...
)
export class FormGroupDirective extends ControlContainer implements Form,

【讨论】:

能给我一个完整的例子吗?

以上是关于未捕获的错误:模板解析错误:无法绑定到“FormGroup”,因为它不是“form”的已知属性的主要内容,如果未能解决你的问题,请参考以下文章

未捕获的错误:模板解析错误:'mat-label' 不是已知元素:

Angular 2 测试组件给出“错误:未捕获(承诺):错误:模板解析错误”

未捕获的类型错误:无法通过淘汰处理绑定“if”

模板解析错误:无法绑定到“routerLink”,因为它不是“a”的已知属性 [重复]

未捕获的错误:无法解析 CountdownComponent 的所有参数:(?)

Rails 6 无法导入纱线依赖项:未捕获错误:模块解析失败:意外字符“#”(1:0)