How to set formgroup data from angular

Question

I have a formgroup like below:

 this.myform = this.fb.group({
      mydata: ''
    });

I was able to set the data with formgroup setValue but in rendering the values in HTML, the option was not selected. This is the HTML:

   <div *ngFor="let item of (items$ | async); index as i; first as first">
        <input type="radio" id="{{item.itemId}}" name="test" value="{{item.itemId}}"  [formControl]="myform.controls.mydata" 
    selected = "(items$ | async).length ===1">
</div>

This doesnot select the first input label in HTML but in typescript the form is valid .

Answer 1

Use the setValue() method to set a new value for an individual control. The setValue() method strictly adheres to the structure of the form group and replaces the entire value for the control.

this.myform.setValue({ mydata: 'yourData' });

Answer 2

use the patchValue to set the value for the whole form

 this.myform .patchValue({ mydata: 'yourData' });