formControlNameは親formGroupディレクティブと一緒に使用する必要があります

Question

モデルドリブンフォームの作成中にエラーが発生しました。エラー：formControlNameを親formGroupディレクティブとともに使用する必要があります。 formGroup ディレクティブを追加し、それに既存のFormGroupインスタンスを渡したいと思うでしょう（クラス内に作成することができます）。

このコードで何が問題になるのか教えてください。

app.component.html

<div class="col-md-6"> 
    <form (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off"> 
    <div class="form-group"> 
     <label for="sessionName">Session Name:</label> 
     <input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." /> 
    </div> 
    <div class="form-group"> 
     <label for="abstract">Abstract:</label> 
     <textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea> 
    </div> 
    <button type="submit" class="btn btn-primary">Save</button> 
    </form> 
</div> 

app.component.ts

export class CreateSession { 

    newSessionForm:FormGroup; 
    abstract : FormControl; 
    name : FormControl; 

    ngOInInit(){ 
     this.name = new FormControl('', Validators.required) 
     this.abstract = new FormControl('', Validators.required) 

     this.newSessionForm = new FormGroup({ 
      name:this.name, 
      abstract: this.abstract 
     })   
    } 


    saveSession(formValues){ 
     console.log(formValues); 
    } 

Answer 1

角度は、親要素のいずれかにFormGroupDirectiveを待っています。だから、：

<form [formGroup]="newSessionForm" ... 
    <input formControlName="name" 
    ... 
    <input formControlName="abstract" 

あなたはformGroupなしFormControlを使用する場合は、代わりにFormControlDirectiveを使用することができます。

<input [formControl]="name" 
... 
<input [formControl]="abstract" 

Answer 2

まずあなたがバインドさフォームコントロールを駆動しようとしている1、formGroupを指定する必要があります入力と一緒に。

<form [formGroup]="newSessionForm" (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off"> 
<div class="form-group"> 
    <label for="sessionName">Session Name:</label> 
    <input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." /> 
</div> 
<div class="form-group"> 
    <label for="abstract">Abstract:</label> 
    <textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea> 
</div> 
<button type="submit" class="btn btn-primary">Save</button>