角4 - 錯誤：formControlName必須與父母formGroup指令

Question

我使用分量附加form輸入領域中使用 -

發動機加載接觸form.html

<form (ngSubmit)="onSubmit()" [formGroup]="contact_form"> 
<md-tab-group> 
    <md-tab label="Form"> 
     <ang-form></ang-form> 
    </md-tab> 
    <md-tab label="Email"> 
     <ang-email></ang-email> 
    </md-tab> 
    <md-tab label="Message"> 
     <ang-message></ang-message> 
    </md-tab> 
</md-tab-group> 
<button md-raised-button type="submit">Publish</button> 

ang-form.html

<div class="form-grid form-title"> 
    <md-input-container> 
     <input formControlName="contact_form_title" 
     class="form-title-field" mdInput placeholder="Title" value=""> 
    </md-input-container> 
</div> 

使用相同的方式我添加了其他組件（ang-email ang-message）html。

我在engine-add-form.ts

export class EngineAddFormComponent{ 

contact_form: any; 

form_value: any; 

constructor(){ 
    this.contact_form = new FormGroup({ 
     contact_form_title: new FormControl('', Validators.minLength(2)), 
     ........ 
     ........ 
    }); 
} 
onSubmit(){ 
    this.form_value = JSON.stringify(this.contact_form.value); 
    console.log(this.form_value); 
} 
} 

添加[formGroup]指令我獲得以下錯誤 -

Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).

我不明白什麼是錯我的代碼。

Answer 1

您必須通過formGroup（在年情況CONTACT_FORM）到子組分，它是ANG-形式

發動機加載接觸form.html（經修飾）

<form (ngSubmit)="onSubmit()" [formGroup]="contact_form"> 
<md-tab-group> 
    <md-tab label="Form"> 
     <ang-form [group]="contact_form"></ang-form> 
    </md-tab> 
    <md-tab label="Email"> 
     <ang-email></ang-email>`` 
    </md-tab> 
    <md-tab label="Message"> 
     <ang-message></ang-message> 
    </md-tab> 
</md-tab-group> 
<button md-raised-button type="submit">Publish</button> 

ANG-form.html（經修飾）

<div class="form-grid form-title" [formGroup]="group"> 
    <md-input-container> 
     <input formControlName="contact_form_title" 
     class="form-title-field" mdInput placeholder="Title" value=""> 
    </md-input-container> 
</div> 

Add @Input() group: FormGroup; in your ang-form.component.ts

Answer 2

有很多這樣做的選擇。

這裏是例如使用formControl指令和角DI系統：

@Component({ 
    selector: 'ang-form', 
    template: ` 
    <input [formControl]="control"> 
    ` 
}) 
export class AngForm { 
    control: FormControl; 

    constructor(private formGroupDir: FormGroupDirective) {} 

    ngOnInit() { 
    this.control = this.formGroupDir.control.get('contact_form_title') as FormControl; 
    } 
} 

Stackblitz Example

更多的例子參見

• Nested arrays in Angular 2 reactive forms?