无法绑定到'formGroup'

无法绑定到'formGroup'，因为它不是'form'的已知属性。无法绑定到'formGroup'

为什么我会收到此错误消息？

请参阅我的plunk了解实际示例。

文件app.module.ts：

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ReactiveFormsModule } from '@angular/forms'; 

import { AppComponent } from './app.component'; 
import { CustomInputComponent } from './custom-input.component'; 


@NgModule({ 
    imports: [ 
    BrowserModule, ReactiveFormsModule 
    ], 
    declarations: [ 
    AppComponent, CustomInputComponent 
    ], 
    providers: [ 

    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

文件main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule);

文件app.component.ts：

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms'; 

@Component({ 
    moduleId: module.id, 
    selector: 'my-app', 
    template: ` 
<h2>Testing Angular 2: custom form input</h2> 

<form [formGroup]="form" (ngSubmit)="submit()"> 
    <custom-input [name]="city" [formControl]="city"></custom-input> 
</form> 
` 
}) 
export class AppComponent implements OnInit { 
    private form: FormGroup; 
    private city: AbstractControl; 

    constructor(private fb: FormBuilder) {} 

    ngOnInit() { 
    this.form = this.fb.group({ 
     'city': 'London' 
    }); 
    this.city = this.form.controls['city']; 
    } 

    submit() { 
    let formValues = this.form.value; 
    console.log('submit',JSON.stringify(formValues)); 
    } 
}

文件定制input.compontent 。：

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

@Component({ 
    moduleId: module.id, 
    selector: 'custom-input', 
    template: '<input [name]="name" [id]="name" [formControl]="formControl" type="text">' 
}) 

export class CustomInputComponent { 
    @Input() name: string; 
    @Input() formControl: AbstractControl; 

    constructor() {} 
}

来源

2016-11-24 EricC

我看到*“号的AppModule;制作bare-骨骼，默认的AppModule“*，看起来你的模块没有被使用。 – jonrsharpe

我将plun中的main.ts文件复制到问题中。该模块在那里使用，那么这不是问题，对吗？或者，也许我误解了？ – EricC

我的意思是在Plunkr中，在控制台 – jonrsharpe

我开始构建一个新的Plunker，因为你的设置似乎没有正确设置。我在代码中也修正了几个小问题

Plunker example

现在缺少的是，对于一个自定义元素用作表单控件需要实现ControlValueAccessor

来源

2016-11-24 12:21:17

谢谢:)顺便说一句，你从哪里得到了Plunker Angular 2入门设置？你自己或另一种方式？ – EricC

只是'[New | V]'按钮在Plunker编辑器中。如果您在Angular2 GitHub仓库中创建了一个新问题，问题模板还提供了一个链接到Plunker模板（由Angular团队维护的模板）。 –

再次感谢好的提示:) – EricC

无法绑定到'formGroup'

回答

相关问题