代码之家 › 专栏 › 技术社区 › Vikhyath Maiya

Angular/Javascript中拦截未选中事件的单选按钮

angular4-forms radio-button angular javascript

Vikhyath Maiya · 技术社区 · 6 年前

我正在编写一个使用单选按钮的角度组件(由于项目限制,需要使用默认单选按钮)。

我需要打印单选按钮的值(无论是否选中)。如下所示:

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

在组件中类似这样:

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

请帮忙。我卡住了。 Dummy app link here

我正在尝试编写一个自定义单选按钮,以便我可以自己设计它的样式。我写不出 radio-group 组件。因此,我需要一个默认的包装器组件。有点像 Stackblitz-link . 我需要未检查的事件,因为我有一些自定义元素,必须对此进行通知。有什么办法可以做到这一点吗?

4 回复 | 直到 6 年前

Arthur 6 年前

使用复选框,将其样式设置为单选按钮。似乎是最简单的解决方案,当然使用ng模型而不是onChange。

Bm8 6 年前

您可以将(更改)替换为(单击),因为单选按钮上的每次单击都是更改。

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

以上是一个解决方案,但我会使用这个:

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

lloydaf 6 年前

所以用两个单选按钮让这个对我有用,让我知道你是否可以为你的应用程序建模。

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

我正在设置 checked 在我的组件中默认为false。

Harun Or Rashid 6 年前

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>

Stackblitz link