Fehler: FormControlName muss mit einer übergeordneten FormGroup-Direktive verwendet werden. Sie sollten eine formGroup-Direktive hinzufügen - Eckige reaktive Formen

Question

Ich habe die folgende Vorlage. Ich versuche, reaktive Formen in den Griff zu bekommen, habe aber ein Problem.

<form [formGroup]="guestForm" novalidate> 
    <div class="panel-body"> 
     <form> 
      <div class="col-md-12 col-sm-12"> 
       <div class="form-group col-md-3 col-sm-6"> 
        <label>First Name* </label> 
        <input formControlName="firstname" type="text" class="form-control input-sm"> 
         </div> 

      </div> 
     </form> 
    </div> 
</form> 

Dann in meiner Komponente habe ich:

@Component({ 
    selector: 'guest-input', 
    templateUrl: './guest-input.component.html', 
}) 
export class GuestInputComponent implements OnInit { 
    @Input() 
    guest: Guest; 

    guestForm: FormGroup; 

    constructor(private _fb: FormBuilder) { } 

    ngOnInit() { 
     this.guestForm = this._fb.group({ 
      firstname: ['test', [Validators.required, Validators.minLength(3)]] 
     }); 
    } 

Dieses sieht alles gut zu mir, aber aus irgendeinem Grund bin ich immer:

Error: Uncaught (in promise): 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). 

ich dachte ich, das erklärt hatte, in meinem ?

Kann jemand sehen, was das Problem ist?

Answer 1

Sie Formular-Tag-Tag in Form mit FormGroup Richtlinie verschachtelt sind, entfernen sie:

<form [formGroup]="guestForm" novalidate> 
    <div class="panel-body"> 
     <form> -> Remove this 
      <div class="col-md-12 col-sm-12"> 
       <div class="form-group col-md-3 col-sm-6"> 
        <label>First Name* </label> 
        <input formControlName="firstname" type="text" class="form-control input-sm"> 
       </div> 
      </div> 
     </form> -> Remove this 
    </div> 
</form> 

Answer 2

In modelDrivenForms, [formGroup]="guestForm" sollte

<div class="form-group col-md-3 col-sm-6" [formGroup]="guestForm"> 
    <label>First Name* </label> 
    <input formControlName="firstname" type="text" class="form-control input-sm"> 
</div>