'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 건물을 만들기 시작했습니다. 또한 코드에서 몇 가지 작은 문제를 해결

Plunker example

무엇 실종하는 사용자 정의 요소는 폼 컨트롤의 요구로 사용하기 위해 ControlValueAccessor 내가 볼