Angular 7: patching value of radio button Form Control does not update UI - css

Question

I am using a HTML template in Angular 7 that consists of a number of radio buttons, each with an associated label - this is associated with a FormGroup object. Clicking on the label should change the state of the radio button to be selected and update the value of the associated FormControl. This works, the problem I have is setting a particular radio button to be selected when the UI loads, or using patchValue - the state of the formGroup is correct when the template is loaded, but the UI does not reflect that a particular radioButton has been selected.
Here's code that shows the problem:
export class AppComponent {
frequencyMinutesOptions: number[] = [1, 2, 5, 10, 60];
myForm: FormGroup;
constructor() {
}
ngOnInit() {
this.myForm = new FormGroup({
frequencyMinutes: new FormControl(5,[])
});
this.myForm.patchValue({'frequencyMinutes':10})
}
}
The HTML template:
<form [formGroup]="myForm">
<ul>
<li *ngFor="let frequency of frequencyMinutesOptions">
<input id="asset-frequency-{{frequency}}" type="radio" value={{frequency}} formControlName="frequencyMinutes" />
<label for="asset-frequency-{{frequency}}"> {{frequency}} </label>
</li>
</ul>
</form>
Relevant CSS:
input {
display: none;
}
input:checked+label {
background-color: blue;
color: #ffffff;
}
You may see a working demo of this here:
https://stackblitz.com/edit/angular-of2ubt
(I know that I'm supposed to embed code examples within the Stackoverflow editor but I'm not sure how to do this with Angular 7 / typescript or if its even possible)

Answer 1

it's a type error. In your html form, the value="10" is interpreted as the string '10'.
You have to use
this.myForm.patchValue({'frequencyMinutes':'10'}) or (see [value])
<input id="asset-frequency-{{frequency}}" type="radio" [value]="frequency" formControlName="frequencyMinutes" />

Answer 2

Either use formGroupName or call external function to make default radio button as true.
<div class="container">
<form [formGroup]="myForm">
<ul>
<li *ngFor="let frequency of frequencyMinutesOptions">
<input id="asset-frequency-{{frequency}}" type="radio" value="{{frequency}}" formControlName="frequencyMinutes" [checked]="isDefaultSelection(frequency)" >
<label for="asset-frequency-{{frequency}}"> {{frequency}} </label>
</li>
</ul>
</form>
<div class="debug">{{myForm.value | json}}
</div>
</div>
export class AppComponent {
frequencyMinutesOptions: number[] = [1, 2, 5, 10, 60];
myForm: FormGroup;
constructor() {
}
ngOnInit() {
this.myForm = new FormGroup({
frequencyMinutes: new FormControl(5,[])
});
this.myForm.patchValue({'frequencyMinutes':10})
}
isDefaultSelection(frequency) {
return frequency == 10 ? true : false;
}
}
or simply use property-binding
<input id="asset-frequency-{{frequency}}" type="radio" [value]="frequency" formControlName="frequencyMinutes">