Как добавить класс css в поле ввода / переключатель при нажатии кнопки в angular

Question

У меня есть модал, т.е. модал ngx- bootstrap, в котором есть две радиокнопки.

Я хочу получить эффект встряхивания на выбранном переключателе в качестве проверки в случае нажатия кнопки «Далее».

Я уже создал css класс для эффекта встряхивания. Я хочу добавить это css нажмите на кнопку, когда это требуется. Я попытался с помощью ngClass, но он не работает, как ожидалось. Как это можно сделать?

HTML

<ng-template #myModal>
    <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" value="Female" [ngClass]="{'rederror': this.cf.genderName.required}">
                <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" value="Male" [ngClass]="{'rederror': this.cf.genderName.required}">
                <label for="male" class="male">Male</label>
            </div>
            <button type="button" (click)="submit()">Next</button>
        </div>
    </div>
</ng-template>

css file

input[type=radio].rederror {
  animation: shake 0.5s 3 linear;
  border: 1px solid red;
}

@keyframes shake {
  0% {margin-left: 0;}
  25% {margin-left: 0.5rem;}
  75% {margin-left: -0.5rem;}
  100% {margin-left: 0;}
}

Answer 1

Вы должны добавить чек к выписке ngClass.

В качестве примера вы можете использовать ту же проверку, что и для клика.

например:

<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>

посмотрите, как это работает Stackblitz

---

Отредактируйте здесь ваш полный пример:

html:

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

вместе с рабочим Stackblitz !

Answer 2

Я думаю, что проще всего было бы добавить стили для эффекта встряхивания в псевдоселектор :active.

input:active {
   // css for shaking the radio button
}

Answer 3

Вы можете добавить класс в обработчик событий клика. пример рабочего кода (целевой элемент, к которому вы хотите добавить класс вместо .col-md-4) - https://stackblitz.com/edit/angular-j94h2r

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