Question

我的html中有下一个单选按钮：

<div class="col-lg-4" id="radioButtons"> 
    <form action="">
        <fieldset id="capacity">
            <legend>capacity</legend>
            <label for="input-ao"><input size=25 id="input-ao" type="radio" name="capacity" [value]="0-30" checked="checked" />0-30</label>
            <label for="input-lo"><input id="input-lo" type="radio" name="capacity" [value]="30-60"/>30-60</label>
            <label for="input-lo"><input id="input-lo" type="radio" name="capacity" [value]="60-100"/>60-100</label>
            <label for="input-lo"><input id="input-lo" type="radio" name="capacity" [value]="100"/>100+</label>
            <br>
        </fieldset>
        <fieldset id="computerFieldset">
            <legend>computer</legend>
            <label for="input-ao"><input size=25 id="input-ao" type="radio" name="comp" value="yes" checked="checked" />yes</label>
            <label for="input-lo"><input id="input-lo" type="radio" name="comp" value="no"/>no</label>
            <br>
        </fieldset>
    </form>
</div>

我想知道选择了哪个单选按钮，也想知道是否会有默认的checked="checked"问题？谢谢。

Answer 1

您需要将[(ngModel)]="YourVariableFromTsCodeBehindFile"添加到单选组的每个单选按钮中。

应该看起来像

<div class="col-lg-4" id="radioButtons"> 
  <form action="">
    <fieldset id="capacity">
      <legend>capacity</legend>
      <label for="input-ao"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" size=25 type="radio" name="capacity" value="0-30" checked="checked" />0-30</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity"  value="30-60"/>30-60</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity"  value="60-100"/>60-100</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity"  value="100"/>100+</label>
      <br>
      {{selectedRed}}
    </fieldset>

    <fieldset id="computerFieldset">
      <legend>computer</legend>
      <label for="input-ao"><input size=25 [(ngModel)]="selectedRadioBtnFrom2ndGroup" type="radio" name="comp" value="yes" checked="checked" />yes</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom2ndGroup" type="radio" name="comp" value="no"/>no</label>

      <br>
    {{blue.id}}   
    </fieldset>  
  </form>
</div>

演示：https://stackblitz.com/edit/angular-material-radio-button-demo-ksrxbc?file=app/app.component.html

Answer 2

例如，您可以使用changeHandler方法-如本视频所示： https://www.youtube.com/watch?v=Wo9nfK2fEyw

示例：

<label for="input-ao"><input size=25 id="input-ao" type="radio" name="capacity" [value]="0-30" checked="checked" (change)="radioChangeHandler($event)" />0-30</label>

radioChangeHandler(event: any){
    this.selectedRadioButton = event.target.value;
}

Answer 3

您可以创建一个名为radioChanged（）的函数。在此功能中，您可以控制所选单选输入的值

radioChange（event：any）{console.log（event.target.value）}

这只是一个主意。因为我现在没有笔记本电脑。如果您不了解这个概念，请告诉我，我将编辑答案

Angular2-如何知道在Angular2应用程序中选择了哪个单选按钮

3 个答案: