表单错误时触发 Angular 动画

Question

我试图在用户尝试发送输入错误的表单时向他提供视觉反馈。因此，当他尝试发送包含错误的表单时，我想为输入字段设置动画。

ts文件中的动画：

trigger('error', [
      transition('* => *', useAnimation(shake)),
      ]),

html文件中的表格：

<mat-form-field [@error]="error">

是否可以在用户每次尝试发送表单但包含错误时触发此动画？

StackBlitz example (Updated with solution)

如您所见，摇动动画在开始时播放，然后不再播放。

解决方案：

根据下面的答案，我更改了设置 onAddErrAnim 变量的顺序。现在 onAddErrAnim 首先设置为 false，然后 if 语句在 setTimout 中调用，耗时 0 毫秒。现在用户可以每毫秒调用 onAdd() 并且动画播放到结束（如果没有触发新动画）。

onAdd() {
  this.onAddErrAnim = false;

  setTimeout( () => {

    if (this.myFormControl.invalid) {
      this.onAddErrAnim = true;
      return;
    } else {
      this.myArray.unshift([this.inputExample]);
    }

  }, 0 )

}

Answer 1

我更新了你的code example：

<div class="example-container" >
  <mat-form-field 
    floatPlaceholder="never" 
    class="input-box" 
    style="width: 100%" 
    (keyup.enter)="onAdd()"
    [@error]="myFormControl.invalid">

@error表单无效时触发

animation is still called when loading the page. how do i avoid that?

CODE EXAMPLE 2 (UPDATED).

and also I want the animation to be triggered only on the onAdd() function

我在组件中创建了一个 animationState 属性 class:

animateError = 'false';

并将其绑定到 [@error] 触发器。根据状态变化，它会触发相应的动画。

来自模板文件中的 false => true:

 ...
 transition('false => true', useAnimation(shake)),

模板内：

[@error]="animateError">

当调用 onAdd() 函数时，它通过 myFormControl:

的验证更新状态

    onAdd() {
    if (this.myFormControl.invalid) {
      this.animateError = 'true';
       // after animation is done, restore the initial state
       setTimeout(() => {
          this.animateError = false;
       }, 500);

      return;
    } else {
      this.animateError = 'false';
    }
    console.log(this.myFormControl);
    this.myArray.unshift([this.inputExample]);

  }

2018 年 3 月 19 日更新：

稍微改进的代码示例，将动画状态的 string 变量替换为 boolean:

 trigger('error', [
      state('0', style({})),
      state('1', style({})),
      transition('0 => 1', useAnimation(shake)),
    ]),

...

 animateError = 'false'; =>  animateError = false;

shouldn't there be a more performant way to trigger the animation without saving a boolean in a variable?

在这种情况下，没有。当使用自定义 动画状态 时，我们需要在某处保存状态值。可能在组件class，数据模型class...因为在你的具体情况下，我们需要手动控制动画（动画需要被触发only当调用 onAdd() 函数时）。

表单错误时触发 Angular 动画

Trigger Angular animation on form error

angular

animation

angular5

angular-forms

angular-animations