使用FormGroup的Angular 4动画在分组部分上无法正常工作

Question

我为我的 FormGroup 创建了一个 Angular 动画，以便不同的表单部分按顺序出现并带有动画效果。以下是代码-

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>

- Ayush Singh

---

我有一个类似上面带有ngIf的FormGroup。有一个按钮，它将showcontrol[i+1]设置为true（以及将showcontrol[i]设置为false），以便下一个表单组可见，较早的一个隐藏。 - Ayush Singh

Answer 1

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

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

- Vega

---

我得到了答案，我是在包装表单的div上应用动画，这就是为什么动画没有出现的原因。再次感谢您的答案！ :) - Ayush Singh

@Vega 我有点困惑，没有状态的情况下动画如何确定执行哪个转换？ - Gangani Roshan

:enter 是 0->1 的快捷方式，而 :leave 则是 1->0 的快捷方式，因此状态已知。 - Vega

当ngIf条件为true时，元素被添加到dom中，并验证visibilityChanged以进行:enter。相反，当该条件为false时，元素从dom中移除并验证:leave。 - Vega

请检查上面的链接，我已经使用状态和转换完成了编程，但为什么不起作用？ - Gangani Roshan