javascript - 带有 FormGroup 的 Angular 4 动画部分不起作用

Question

我已经为我的 FormGroup 创建了一个 Angular 动画，这样不同的 Form 部分就会随着动画顺序出现。这是代码-

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

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

Answer 1

使用 *ngIf 隐藏/显示组在组上设置动画。在此解决方案中，我只为条件设置了两个值，但会根据您的需要进行调整。我还设置了一些可能需要根据您的需要进行调整的样式。但请记住，如果设置为 false，ngIf 将删除该组，因此如果未设置样式，这些组将“移动”:

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

动画:

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