title: Angular 4 Animation with FormGroup with sections not working
body: <p>I have created an Angular animation for my FormGroup, so that different Form sections appear sequentially with animations. Here is the code-</p>
  
  <pre><code>animations:[ 
   trigger('visibilityChanged', [
      state('shown' , style({ opacity: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('shown =&gt; hidden', animate('600ms')),
      transition('void =&gt; *', animate('1000ms')),
      ])
   ]
  </code></pre>
  
  <p>And here is the html- </p>
  
  <pre><code>&lt;form [formGroup]="regForm"&gt;
      &lt;div *ngIf="showcontrol[0]" @visibilityChanged&gt;
          &lt;span id="formheading" class="text-center"&gt;ENTER TEAM DETAILS&lt;/span&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="teamname"&gt;Team Name:&lt;/label&gt;
              &lt;label class="validations" @load *ngIf="!regForm.get('team_name').valid &amp;&amp; regForm.get('team_name').touched"&gt;Please Enter a Valid Team Name!&lt;/label&gt;
              &lt;input type="text" class="form-control" formControlName="team_name" id="teamname" required placeholder="Enter Your Team Name"&gt;
          &lt;/div&gt;
          .......
          ..
      &lt;/div&gt;
  </code></pre>