Question

.login-error {
    text-align: center;
    margin-bottom: 15px;
}

.login-error span {
    background: #e03030;
    padding: 2px 28px 2px 28px;
}

ts文件

focusPasswordInput() {
    this.loginForm.controls.password.markAsUntouched();
}

focusEmailInput(){
    this.loginForm.controls.email.markAsUntouched();
}

脚本在提交表单时以及ng if条件为true时添加一个div，并在跨度内显示错误。如果用户在单击按钮提交表单后将焦点放在输入框中，则上面的ts文件中的两个函数将隐藏错误消息。它可以处理div隐藏和显示的错误，但是看起来不太漂亮，所以有没有办法添加过渡效果？

<div *ngIf="(loginError && loginForm.controls.email.touched) && (loginForm.controls.password.touched) " class="login-error">
   <span>Email or Password incorrect</span>
</div>
<input type="text" formControlName="email" name="email" (focus)="focusEmailInput()" placeholder="email *"/>
<input type="text" formControlName="password" (focus)="focusPasswordInput()" placeholder="Password *"/>

Answer 1

您可以使用角度动画来动画错误消息：https://www.npmjs.com/package/angular-animations

<div [@zoomInOnEnter]
    [@zoomOutOnLeave]
    *ngIf="(loginError && loginForm.controls.email.touched) && (loginForm.controls.password.touched)"
    class="login-error">
    <span>Email or Password incorrect</span>
</div>

记住要在.ts文件中添加函数定义：

@Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...'],
    animations: [
        zoomInOnEnterAnimation(),
        zoomOutOnLeaveAnimation()
    ]
})

如何向此div添加过渡

1 个答案: