formControlName muss mit einer übergeordneten FormGroup-Direktive verwendet werden

Question

Beim Erstellen modellgesteuerten Formulars erhalte ich einen Fehler: Fehler: FormControlName muss mit einer übergeordneten FormGroup-Direktive verwendet werden. Sie sollten eine formGroup -Direktive hinzufügen und eine vorhandene FormGroup-Instanz übergeben (Sie können eine in Ihrer Klasse erstellen).

Bitte sagen Sie mir, was in diesem Code falsch läuft.

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

Angular für FormGroupDirective auf einem der übergeordneten Elemente warten. Also:

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

Wenn Sie FormControl ohne formGroup verwenden möchten, können Sie FormControlDirective statt:

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

Answer 2

Zuerst die formGroup angeben müssen, was man die Formular-Steuerelemente wird binded fahren mit den Eingängen.

<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>