如何从单选按钮角度获取选中的值

Question

我需要从角度单选按钮获取值。假设有这样的html代码：

 <label class="radio-inline">
   <input class="form-check-input" type="radio" [(ngModel)]="dog" name="gob" value="i" [checked]="true" (change)="onItemChange(item)"/>Dog
 </label>
 <label class="radio-inline"> 
   <input class="form-check-input" type="radio" [(ngModel)]="cat" name="cat" value="p"  (change)="onItemChange(item)"/>Cat
 </label>

在我的 ts 页面中，我需要获取单选按钮的值 喜欢

dog.value

我的目的是：

1. 将默认检查设置为第一个单选按钮
2. 单击单选按钮时获取值

有人可以帮助我吗？

Answer 1

可以绑定单选按钮的数据。只需添加单选按钮的值并在

ngModel

中进行更改

html

<input class="form-check-input" type="radio" value="dog" 
[(ngModel)]="dog.value" name="gob" value="i" [checked]="true" 
(change)="onItemChange($event.target.value)"/>

ts

onItemChange(value){
   console.log(" Value is : ", value );
}

Answer 2

最简单的方法之一就是这样做：

html：

<input
type="radio"
id="a"
name="sample"
value="pure"
(change)="onChange($event)"
checked /> 
<label for="a">A</label> 

<input
type="radio"
id="b"
name="sample"
value="b"
(change)="onChange($event)" />
<label for="b">B</label>

ts：

onChange(e) {
   this.type= e.target.value;
}

Answer 3

在您的代码中，为了对单选按钮进行分组，它们应该具有相同的

name

属性输入。

要解决您的问题，您可以使用

*ngFor

循环播放无线电输入，

HTML：

    <div *ngFor="let opt of options; let i=index">
      <label class="radio-inline">
        <input type="radio" class="form-check-input" [value]="opt.value" [name]="opt.name" [checked]="i == 0"
        (change)="onRadioChange(opt)"/>
      </label>
    </div>

TS：

interface Option {
 name: string;
 value: string;
}

options: Option[] = [
 {
   name: "pet",
   value: "dog"
 },
 {
   name: "pet",
   value: "cat"
 }
]

onRadioChange(opt: Option) {
 console.log(`Value is: ${opt.value}`)
}

定义无线电组