Переключатель перехватывает непроверенное событие в Angular / Javascript

Question

Я пишу угловой компонент, который использует радиокнопку (необходимо использовать радиокнопки по умолчанию из-за ограничений проекта).

Мне нужно напечатать значение переключателя (независимо от того, отмечен он или нет).Например:

<input type="radio"  (change)="onUpdate($event)">
<p>{{isActive}}</p>

В компоненте что-то вроде этого:

onUpdate(event) {
    this.isActive = event.target.checked;
}

Но это не работает, так как событие изменения не запускается, когда переключатель не отмечен.Есть ли способ перехватить событие, когда переключатель не отмечен?

Пожалуйста, помогите.Я застрял. Ссылка на фиктивное приложение здесь

Редактировать: Что я пытаюсь сделать

Я пытаюсь написать собственное радиокнопка, чтобы я мог стилизовать его самостоятельно.Я не могу написать radio-group компонент.Следовательно, мне нужен компонент-обертка вокруг стандартного.Что-то вроде Stackblitz-link .Мне нужно событие unchecked, потому что у меня есть какой-то пользовательский элемент, который должен быть уведомлен об этом.Есть ли способ добиться этого?

Answer 1

Можете ли вы попробовать настроить эту логику с вашим кодом?Проверка некоторых новых radio будет uncheck другими, и мы можем отслеживать это поведение.

<p>
  <input type="radio" name="r1" value="one" [(ngModel)]="isActive">
  <input type="radio" name="r2" value="two" [(ngModel)]="isActive"> 
  <input type="radio" name="r3" value="three" [(ngModel)]="isActive">
</p>

<p>{{isActive}}</p>

Ссылка на стек *

Answer 2

Вы можете заменить (изменить) на (щелчок), потому что каждый щелчок на переключателе в любом случае является изменением.

<input type="radio" (click)="onUpdate($event)">
<p>{{isActive}}</p>

Выше приведено решение, но я бы использовал это:

<input type="radio" [(ngModel)]="isActive">
<p>{{isActive}}</p>

Он привязывает вашу радио-кнопку к вашему свойству isActive, поэтому он динамически изменяется при нажатии.

Answer 3

Итак, использование двух радиокнопок помогло мне, дайте мне знать, можете ли вы смоделировать это для своего приложения.

<input type="radio" name="button" [value]="checked" (change)="checked=!checked">
<input type="radio" name="button" [value]="!checked" (change)="checked=!checked">
<p>{{checked}}</p>

Я устанавливаю checked в значение по умолчанию в моем компоненте.

Answer 4

Используйте флажок, стиль как радио-кнопка. Кажется, это самое простое решение и, конечно, использовать ng-модель вместо onChange.