Question

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

ts文件中的动画：

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

html文件中的表单：

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

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

StackBlitz example (Updated with solution)

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

SOLUTION：

从下面的回答中我改变了设置onAddErrAnim变量的顺序。现在onAddErrAnim首先设置为false，然后在if内以0毫秒调用setTimout语句。现在，用户可以每毫秒调用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。

加载页面时仍会调用
动画。我该如何避免呢？

CODE EXAMPLE 2 (UPDATED)

我也希望动画只在onAdd（）上触发功能

我在组件类中创建了一个animationState属性：

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]);

  }

更新19.03.2018：

通过将动画状态string变量替换为boolean来改进代码示例很少：

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

...

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

不应该有更高效的方式来触发动画没有在变量中保存布尔值？

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

在表单错误上触发角度动画

1 个答案: