'formGroup'にバインドできません。

Question

'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 .ts：

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() {} 
} 

Answer 1

あなたがあなたの設定が適切に設定されていないように思われたので、私は新しいPlunkerを構築し始めました。ベアを作り、私はまた、フォームコントロールがControlValueAccessor