Erreur: formControlName doit être utilisé avec un parent formGroup directive. Vous pouvez ajouter un formGroup directive - Angulaire formes réactives

J'ai le modèle ci-dessous. Je suis en train d'essayer de se familiariser avec les formes réactives mais j'ai un problème.

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

Ensuite dans mon composant que j'ai:

@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)]]
        });
    }

Tout cela semble bien pour moi, mais pour une raison que j'obtiens:

Erreur: Uncaught (promettre): Erreur: formControlName doit être utilisé avec un parent formGroup directive. Vous pouvez ajouter un formGroup
la directive et la passer à un existant FormGroup exemple (vous pouvez en créer un dans votre classe).

Je pensais que j'avais déclaré dans mon <form>.

InformationsquelleAutor Simon | 2017-04-09