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

Share Improve this question Follow edited Feb 20, 2020 at 4:00 Vega 28.8k2828 gold badges120120 silver badges145145 bronze badges asked Sep 15, 2017 at 8:22 Ayush SinghAyush Singh 30611 gold badge44 silver badges1212 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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