I have a button which is used to check or uncheck radio buttons dynamically. The problem is it works once and then if I decide to manually click on the radio button of the same group (another one of-course) it updates as expected. However, when I then try do dynamically adjust it to the previous value (with the button click) it doesn't apply that value anymore.
Here is the code
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 };
}
So, it changes the first time I click on the onRadioDynamicChange, it checks the first radiobutton. Then I click on its sibling and then again on the onRadioDynamicChange and it doesn't check the first radioButton anymore, no action occurs.
EDIT
Here is the behaviour: Stackblitz example
i also tried what you have done Auqib Rather, that was my first solution of the problem, but it still not working great, it happens same isssue as the op. First time working, next time will not update.
I found a workaround, try this :
<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";
}
But I didn't know why the first aproach is not working as expected. If someone know the reason i'll be glad to know about it.