如何将css类添加到输入框/单选按钮中单击按钮

我有模式，即ngx引导模式，其中有两个单选按钮

如果单击“下一步”按钮，我希望在所选单选按钮上获得震动效果作为验证。

我已经为震动效果创建了css类。我想添加这个css点击按钮时，它是必要的。我试着使用ngClass，但它没有按预期工作。如何做到这一点

HTML

---

您可以在submit click的事件处理程序中添加类。示例工作代码（目标是希望类添加到的元素，而不是.col-md-4）——

---

您可以在submit click的事件处理程序中添加类。示例工作代码（目标是希望类添加到的元素，而不是.col-md-4）——

---

您必须在

ngClass

语句中添加一个检查

例如，您可以使用与单击相同的检查

e、 g:

<label *ngFor="let radiobutton of radioItems">
  <div>
  <input type="radio" name="options" (click)="model.option = radiobutton"
    [checked]="radiobutton === model.option"
    [ngClass]="{'rederror': radiobutton === model.option}">{{radiobutton}}  
  </div>
</label>
<p>

---

一起工作吧

您必须在您的

ngClass

语句中添加一个检查

例如，您可以使用与单击相同的检查

e、 g:

<label *ngFor="let radiobutton of radioItems">
  <div>
  <input type="radio" name="options" (click)="model.option = radiobutton"
    [checked]="radiobutton === model.option"
    [ngClass]="{'rederror': radiobutton === model.option}">{{radiobutton}}  
  </div>
</label>
<p>

---

一起工作吧

我认为最简单的方法是将震动效果的样式添加到

：active

伪选择器中

输入：激活{
//用于摇动单选按钮的css
}

我认为最简单的方法是将震动效果的样式添加到

:active

伪选择器中

输入：激活{
//用于摇动单选按钮的css
}

这是否回答了您的问题？这回答了你的问题吗？我想要在点击提交按钮后的震动效果更新的下部示例+Stackblitz！请在点击提交按钮后查看tooI want震动效果更新的下部示例+Stackblitz！也请看一看

  submit(): void {
    const eles = this.formContainer.nativeElement.querySelectorAll('.col-md-4');
    eles.forEach(ele => ele.classList.add('shake'));
  }

<label *ngFor="let radiobutton of radioItems">
  <div>
  <input type="radio" name="options" (click)="model.option = radiobutton"
    [checked]="radiobutton === model.option"
    [ngClass]="{'rederror': radiobutton === model.option}">{{radiobutton}}  
  </div>
</label>
<p>

<div class="modal-body">
    <div class="row">
        <div class="col-md-4 col-md-offset-3 text-center">
            <input formControlName="genderName" type="radio" id="female" (click)="selectedOption=female" value="female"
                [ngClass]="{'rederror': selectedOption===female && shake}" [checked]="selectedOption===female">
            <label for="female" class="female">Female</label>
        </div>
        <div class="col-md-4 col-md-pull-1 ml-4">
            <input formControlName="genderName" type="radio" id="male" (click)="selectedOption=male"
                [checked]="selectedOption===male" [ngClass]="{'rederror': selectedOption===male && shake}">
            <label for="male" class="male">Male</label>
        </div>
        <button type="button" (click)="submit()">Next</button>
    </div>
</div>

import { Component,  } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public male = "Male";
  public female = "Female";
  public selectedOption = this.female;
  public shake = false;

  public submit() {
    this.shake = true;    
    setTimeout(() => this.shake = false, 500);
  }
}