title: ERROR Error: formGroup expects a FormGroup instance (ANGULAR 5)
body: <p>I have one this basic form in Angular 5, however this being released the following error.</p>
  
  <blockquote>
    <p>Here is the error:</p>
    
    <blockquote>
      <p>EditVisitanteDialogComponent.html:10 ERROR Error: formGroup expects a
      FormGroup instance. Please pass one in.</p>
      
      <p>Example:</p>
    </blockquote>
  
  <pre><code>&gt; 
  &gt; &lt;div [formGroup]="myGroup"&gt;   &lt;input formControlName="firstName"&gt;
  &gt; &lt;/div&gt;
  &gt; 
  &gt; In your class:
  </code></pre>
    
    <blockquote>
      <p>this.myGroup = new FormGroup({    firstName: new FormControl() }); at
      Function.ReactiveErrors.missingFormException (forms.js:6347) at
      FormGroupDirective._checkFormPresent (forms.js:6852) at
      FormGroupDirective.ngOnChanges (forms.js:6623) at
      checkAndUpdateDirectiveInline (core.js:12358) at
      checkAndUpdateNodeInline (core.js:13886) at checkAndUpdateNode
      (core.js:13829) at debugCheckAndUpdateNode (core.js:14722) at
      debugCheckDirectivesFn (core.js:14663) at Object.eval [as
      updateDirectives] (EditVisitanteDialogComponent.html:10) at
      Object.debugUpdateDirectives [as updateDirectives] (core.js:14648)
      View_EditVisitanteDialogComponent_0 @
      EditVisitanteDialogComponent.html:10</p>
    </blockquote>
  </blockquote>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;div class="dialog-content-wrapper"&gt;
      &lt;mat-toolbar matDialogTitle class="mat-accent m-0"&gt;
          &lt;mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center"&gt;
              &lt;span class="title dialog-title"&gt;Editar visitante&lt;/span&gt;
              &lt;button mat-button class="mat-icon-button" (click)="dialogRef.close()" aria-label="Close dialog"&gt;
                  &lt;mat-icon&gt;close&lt;/mat-icon&gt;
              &lt;/button&gt;
          &lt;/mat-toolbar-row&gt;
      &lt;/mat-toolbar&gt;
     //esta linha que esta com o erro 
      &lt;form name="form" [formGroup]="editForm" #f="ngForm"&gt;
          &lt;div mat-dialog-content class="m-0 p-24" fusePerfectScrollbar&gt;
              &lt;div fxLayout="row" fxLayoutAlign="start start"&gt;
                  &lt;mat-icon class="mr-12 mt-12"&gt;label_outline&lt;/mat-icon&gt;
                  &lt;mat-form-field class="mr-16"&gt;
                      &lt;mat-select placeholder="Documento" formControlName="documento"&gt;
                          &lt;mat-option value="option"&gt;Option&lt;/mat-option&gt;
                      &lt;/mat-select&gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-form-field&gt;
                      &lt;input matInput placeholder="Número" formControlName="numDocumento"&gt;
                  &lt;/mat-form-field&gt;
              &lt;/div&gt;
  
              &lt;div fxLayout="row" fxLayoutAlign="start start"&gt;
                  &lt;mat-icon class="mr-12 mt-12"&gt;account_circle&lt;/mat-icon&gt;
                  &lt;mat-form-field fxFlex&gt;
                      &lt;input formControlName="nome" placeholder="Nome do Visitante" matInput required&gt;
                  &lt;/mat-form-field&gt;
              &lt;/div&gt;
  
              &lt;div fxLayout="row" fxLayoutAlign="start start"&gt;
                  &lt;mat-icon class="mr-12 mt-12"&gt;group&lt;/mat-icon&gt;
                  &lt;mat-form-field fxFlex&gt;
                      &lt;mat-select placeholder="Intenção" formControlName="motivoVisita"&gt;
                          &lt;mat-option value="option"&gt;Familiar&lt;/mat-option&gt;
                          &lt;mat-option value="option"&gt;Particular&lt;/mat-option&gt;
                          &lt;mat-option value="option"&gt;Prestado de Serviço&lt;/mat-option&gt;
                      &lt;/mat-select&gt;
                  &lt;/mat-form-field&gt;
              &lt;/div&gt;
  
              &lt;div fxLayout="row" fxLayoutAlign="start start"&gt;
                  &lt;mat-icon class="mr-12 mt-12"&gt;lock_open&lt;/mat-icon&gt;
                  &lt;mat-form-field fxFlex&gt;
                      &lt;mat-select placeholder="Autorização" formControlName="tipoAutorizacao"&gt;
                          &lt;mat-option value="option"&gt;Lorem ipsum...&lt;/mat-option&gt;
                      &lt;/mat-select&gt;
                  &lt;/mat-form-field&gt;
              &lt;/div&gt;
  
              &lt;div fxLayout="row" fxLayoutAlign="start start"&gt;
                  &lt;div fxLayout="column"&gt;
                      &lt;p&gt;Quando?&lt;/p&gt;
                      &lt;mat-radio-group formControlName="periodoAutorizacao"&gt;
                          &lt;mat-radio-button value="hoje"&gt;Hoje&lt;/mat-radio-button&gt;
                          &lt;mat-radio-button value="semanal" class="ml-8"&gt;Semanal&lt;/mat-radio-button&gt;
                          &lt;mat-radio-button value="periodo" class="ml-8"&gt;Período&lt;/mat-radio-button&gt;
                      &lt;/mat-radio-group&gt;
  
                      &lt;div id="periodo" fxLayout="row" fxLayoutAlign="space-evenly start"&gt;
                          &lt;mat-form-field fxFlex="45"&gt;
                              &lt;input matInput [matDatepicker]="picker" placeholder="De" formControlName="periodoDe"&gt;
                              &lt;mat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
                              &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
                          &lt;/mat-form-field&gt;
                          &lt;mat-form-field fxFlex="45"&gt;
                              &lt;input matInput [matDatepicker]="myDatepicker" placeholder="Até" formControlName="periodoAte"&gt;
                              &lt;mat-datepicker-toggle matSuffix [for]="myDatepicker"&gt;&lt;/mat-datepicker-toggle&gt;
                              &lt;mat-datepicker #myDatepicker&gt;&lt;/mat-datepicker&gt;
                          &lt;/mat-form-field&gt;
                      &lt;/div&gt;
  
                      &lt;div id="semanal"&gt;
                          &lt;mat-checkbox formControlName="diaSem1"&gt;Seg&lt;/mat-checkbox&gt;
                          &lt;mat-checkbox formControlName="diaSem2"&gt;Ter&lt;/mat-checkbox&gt;
                          &lt;mat-checkbox formControlName="diaSem3"&gt;Qua&lt;/mat-checkbox&gt;
                          &lt;mat-checkbox formControlName="diaSem4"&gt;Qui&lt;/mat-checkbox&gt;
                          &lt;mat-checkbox formControlName="diaSem5"&gt;Sex&lt;/mat-checkbox&gt;
                          &lt;mat-checkbox formControlName="diaSem6"&gt;Sáb&lt;/mat-checkbox&gt;
                          &lt;mat-checkbox formControlName="diaSem7"&gt;Dom&lt;/mat-checkbox&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;mat-form-field fxFlex&gt;
                      &lt;textarea matInput placeholder="Observação" formControlName="observacao"&gt;&lt;/textarea&gt;
                  &lt;/mat-form-field&gt;
              &lt;/div&gt;
  
  
          &lt;/div&gt;
          &lt;div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center"&gt;
              &lt;button mat-raised-button class="save-button mat-accent" aria-label="SAVE"&gt;
                  SALVAR
              &lt;/button&gt;
  
              &lt;button mat-button class="mat-icon-button" aria-label="Delete" matTooltip="Excluir"&gt;
                  &lt;mat-icon&gt;delete&lt;/mat-icon&gt;
              &lt;/button&gt;
  
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>component.ts</strong> </p>
  
  <pre><code>import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
  
  @Component({
    selector: 'editvisitante',
    templateUrl: './editvisitante.component.html',
    styleUrls: ['./editvisitante.component.scss'],
    encapsulation: ViewEncapsulation.None
  })
  export class EditvisitanteComponent implements OnInit {
  
    editForm: FormGroup;
  
    constructor(private formBuilder: FormBuilder) {
    }
  
    ngOnInit() {
  
      this.editForm = this.formBuilder.group({
         documento: ["", Validators.required],
         numDocumento: ["", Validators.required],
         nome: ["", Validators.required],
         motivoVisita: ["", Validators.required],
         tipoAutorizacao: ["", Validators.required],
         periodoAutorizacao: ["", Validators.required],
         periodoDe: [""],
         periodoAte: [""],
         diaSem1: [""],
         diaSem2: [""],
         diaSem3: [""],
         diaSem4: [""],
         diaSem5: [""],
         diaSem6: [""],
         diaSem7: [""],
         observacao: ["", Validators.required],
      });
  
    }
  
  }
  </code></pre>