Angular 2 动画 - 布尔触发器

Question

我有一个只有一个字段的表单，如果该字段不正确，我想使用动画摇动它

<form [formGroup]="subscribeFormGroup">
    <mat-form-field [@error]="isError" class="al-subscribe-form-field">
            <input formControlName="email" matInput type="email">
            <mat-icon class="al-subscribe-icon" svgIcon="mail" (click)="onSubscribeClick()"></mat-icon>
    </mat-form-field>
</form>


animations: [
    trigger('error', [
        transition('false <=> true', useAnimation(shake)),
    ]),
],

public onSubscribeClick(): void {
        if (this.subscribeFormGroup.invalid) {
            this.isError = true;
        }
    ...
}

现在它只在我尝试发送不正确的数据时触发，如果我第二次点击按钮等，该字段不会摇晃

Answer 1

您需要在每个动画循环后将 isError 设置为 false。否则转换 false <=> true 永远不会触发，因为 isError 仍然是 true。尝试以下

public onSubscribeClick(): void {
  if (this.subscribeFormGroup.invalid) {
    this.isError = true;
    setTimeout(() => { this.isError = false }, 1000);    // <-- set the duration to the animation duration
  }
  ...
}

Answer 2

另一种比 setTimeout 更好的方法是使用 animation callback done

<mat-form-field [@error]="isError" 
                (@error.done)="isError = false"
                class="al-subscribe-form-field">
...
</mat-form>

Angular 2 动画 - 布尔触发器

Angular 2 Animation - boolean trigger

angular

angular-reactive-forms

angular-animations