再次单击后无法动态设置单选按钮的值

时间:2018-11-05 10:27:43

标签: javascript html angular radio-button angular-forms

我有一个按钮,用于动态检查或取消选中单选按钮。问题是它可以工作一次,然后如果我决定手动单击同一组(课程中的另一个)的单选按钮,它将按预期更新。但是,当我尝试将其动态调整为先前的值(单击按钮)时,它将不再应用该值。

这是代码

html:

<input type="radio" id="one" class="" formControlName="group" value="one" [checked] = "radioGroup.first" >
<input type="radio" id="two" class="" formControlName="group" value="two" [checked] = "radioGroup.second" >
<input type="radio" id="three" class="" formControlName="group" value="three" [checked] = "radioGroup.third" >

.ts

onRadioDynamicChange() {
this.radioGroup = { first: true, second: null, third: null };
}

因此,它在我第一次单击onRadioDynamicChange时会更改,它将检查第一个单选按钮。然后,我单击它的同级,然后再次单击onRadioDynamicChange,它不再检查第一个radioButton,不会发生任何操作。

编辑

行为如下:Stackblitz example

2 个答案:

答案 0 :(得分:1)

我还尝试了您所做的Auqib Rather,这是我对该问题的第一个解决方案,但是它仍然无法很好地工作,它发生的情况与操作者相同。第一次工作,下次不会更新。

我找到了解决方法,请尝试以下方法:

  <div class="container">
        <input type="radio" name="radio" (click)="radio = 'one'" id="one" class="" value="one" [checked]="radio == 'one'">
        <input type="radio" name="radio" id="two" (click)="radio ='two'" value="two" [checked]="radio == 'two'">
        <input type="radio" name="radio" id="three" (click)="radio ='three'" class="" value="three" [checked]="radio == 'three'">
        <button (click)=' onRadioDynamicChange()'>Click Me</button>
    </div>

ts:

  onRadioDynamicChange() {
        this.radio = "one";
  }

但是我不知道为什么第一个方法没有按预期工作。如果有人知道原因,我将很高兴知道。

答案 1 :(得分:0)

如果要使用在    [{https://stackblitz.com/edit/angular-srfwdq?file=src%2Fapp%2Fapp.component.html],您应该使用示例“ radioGroup”对象作为radioGroup:any = {} 因此,您可以向其中添加属性,如果不确定对象属性的天气状况或是否以 “ radioGroup?.first”,“ radioGroup?.second”和“ radioGroup?.third”

您应该这样使用,并确保一次只有一个对象“ radioGroup”为真   在ts中。

  export class AppComponent {
    name = 'Angular';
    radioGroup:any={first:false,second:false,third:false};


    onRadioDynamicChange() {
      this.radioGroup.second =false;
      this.radioGroup.third=false;
      this.radioGroup.first =true;
    }

  }

以html

<form >

<input type="radio" id="one" name="a"  value="one" 
[checked] = "radioGroup.first" >First
<input type="radio" id="two" name="a"  value="two" 
[checked] = "radioGroup.second" >Second
<input type="radio" id="three" name="a"  value="three" 
[checked] = "radioGroup.third" >Third


<button type="button" 
(click)="onRadioDynamicChange()">first</button>

  </form>

肯定会工作