I have created an Angular animation for my FormGroup, so that different Form sections appear sequentially with animations. Here is the code-

animations:[ 
 trigger('visibilityChanged', [
    state('shown' , style({ opacity: 1 })),
    state('hidden', style({ opacity: 0 })),
    transition('shown => hidden', animate('600ms')),
    transition('void => *', animate('1000ms')),
    ])
 ]

And here is the html-

<form [formGroup]="regForm">
    <div *ngIf="showcontrol[0]" @visibilityChanged>
        <span id="formheading" class="text-center">ENTER TEAM DETAILS</span>
        <div class="form-group">
            <label for="teamname">Team Name:</label>
            <label class="validations" @load *ngIf="!regForm.get('team_name').valid && regForm.get('team_name').touched">Please Enter a Valid Team Name!</label>
            <input type="text" class="form-control" formControlName="team_name" id="teamname" required placeholder="Enter Your Team Name">
        </div>
        .......
        ..
    </div>

I have created an Angular animation for my FormGroup, so that different Form sections appear sequentially with animations. Here is the code-

animations:[ 
 trigger('visibilityChanged', [
    state('shown' , style({ opacity: 1 })),
    state('hidden', style({ opacity: 0 })),
    transition('shown => hidden', animate('600ms')),
    transition('void => *', animate('1000ms')),
    ])
 ]

And here is the html-

<form [formGroup]="regForm">
    <div *ngIf="showcontrol[0]" @visibilityChanged>
        <span id="formheading" class="text-center">ENTER TEAM DETAILS</span>
        <div class="form-group">
            <label for="teamname">Team Name:</label>
            <label class="validations" @load *ngIf="!regForm.get('team_name').valid && regForm.get('team_name').touched">Please Enter a Valid Team Name!</label>
            <input type="text" class="form-control" formControlName="team_name" id="teamname" required placeholder="Enter Your Team Name">
        </div>
        .......
        ..
    </div>

• javascript
• angular
• typescript
• animation

• I have a FormGroup with divisions like above with ngIf, There is a button which sets showcontrol[i+1] as true (and showcontrol[i] as false, so that next form group bees visible and latter one hides – Ayush Singh Commented Sep 17, 2017 at 17:39

1 Answer 1

Set an animation on the group with *ngIf hidding/showing the group. In this solution I set only two values for the condition, but adapt it to your need. Also I set some styles which maybe need to be adapted to your need, too. But remember ngIf will remove the group if it's set to false, so the groups will 'move' if not styled:

HTML:

<form #individual="ngForm">
  <div class="myDiv">
    <div [@visibilityChanged] *ngIf="myCondition===1" class="myGroup1  form-group">
      <label for="name">Name:</label>
      <input type="text"  #myModel="ngModel"  class="form-control" id="name" ngModel name="name" pattern="[a-zA-Z ]*" required placeholder="Enter Your Name">
      <label style="color:red" *ngIf="myModel.invalid">INVALID</label>
    </div>

    <div [@visibilityChanged] *ngIf="myCondition===2" class="myGroup2 form-group">
      <label for="name">Lastname:</label>
      <input type="text"  #myModel="ngModel"  class="form-control" id="name" ngModel name="name" pattern="[a-zA-Z ]*" required placeholder="Enter Your Name">
      <label style="color:red" *ngIf="myModel.invalid">INVALID</label>
    </div>
</div>
    <button type="submit" class="btn" (click)="onSave(individual)" [disabled]="!individual.valid">SUBMIT</button>

<button (click)="toggle()">Click me to toggle</button>
 </form>

TypeScript:

 ...
  myCondition=1;
  toggle(){
    this.myCondition = this.myCondition === 2 ?  1 : 2
  }
  ...

animation:

trigger('visibilityChanged', [
        transition(':enter', [
            style({ opacity: 0, transform: 'translateX(-40px)' }),
            animate(600, style({ opacity: 1, transform: 'translateX(0)' }))
        ]),
        transition(':leave', [
            style({ opacity: 1, transform: 'translateX(0)' }),
            animate(600, style({ opacity: 0, transform: 'translateX(-40px)' 
       }))
    ])

DEMO