Question

我希望将animated pulse类添加到输入字段中，而不是您的名字。这两个类均来自animate.css库，该库显示脉冲效果，并且一旦用户输入有效文本以重置动画，也应删除该类，以便在用户对输入字段agin进行错误操作时再次显示动画。 / p>

<form method="post" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <input type="text" formControlName="first_name" name="first_name" placeholder="First Name *"/>
    <div *ngIf="registerForm.controls.first_name.errors && registerForm.controls.first_name.touched" class="error">
    <div *ngIf="registerForm.controls.first_name.errors.required">Your name is required</div>
    </div>
     <div *ngIf="submitted && registerForm.controls.first_name.errors && registerForm.controls.first_name.pristine" class="error">
    <div *ngIf="registerForm.controls.first_name.errors.required">Your name is required</div>
    </div>

.ts

    this.registerForm = this.formBuilder.group({
          first_name: ['', Validators.required],

 onSubmit() {
    this.submitted = true;
    if (this.registerForm.invalid) {
        return;
    }
}

Answer 1

您可以使用ngClass directive为html标签动态添加或删除类。根据您提供的代码，我想您想在触摸输入字段时添加类。您可以使用反应性表单控件属性touched和invalid来实现这一点。

<input [ngClass]="{'animated pulse': registerForm.get('first_name').touched && registerForm.get('first_name').invalid}" type="text" formControlName="first_name" name="first_name" placeholder="First Name *"/>

如果表单验证失败，如何通过使用动画CSS类将动画添加到输入字段

1 个答案: