Angular 13: Radio [checked] not working with formControlName

Question

I am using a simple FormGroup to set a checked value to a radio, but it simply does not work. It works from the front-page to the code, but not from the code to the front-page.

HTML:

   <form [formGroup]="myForm">
    <div class="form-check form-check-inline mt-2">
      <input class="form-check-input" type="radio" formControlName="radioValue1"
             id="radioStopLossNone" [checked]="radioModel.value1==1"
             value="1">
      <label class="form-check-label" for="radioStopLossNone">None</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" formControlName="radioValue1"
             id="radioStopLossFixed" [checked]="radioModel.value1==2"
             value="2">
      <label class="form-check-label" for="radioStopLossFixed">Value-1</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" formControlName="radioValue1"
             id="radioStopLossTrailing" [checked]="radioModel.value1==3"
             value="3">
      <label class="form-check-label" for="radioStopLossTrailing">Value-2</label>
    </div>
   </form>

Model:

export class Model {
   value1: number;
}

TS:

ngOnInit(): void {
  this.model = new Model();
  this.model.value1 = 1;

  this.myForm = this.formBuilder.group({
    radioValue1: [model.value1, [Validators.required]],
  });
  this.f.radioValue1.valueChanges.subscribe(() => {
    console.log('radioValue1: ' + this.f.radioValue1.value);
  });
}

Now, if I remove the formControlName tag from the radio controls, then it starts reading the code and checking the radios from code to front-page, but disables the link from front-page to code. How can I get them both working at the same time?

Thank you.

SOLUTION: I followed the recommendations of @rohithpoya to remove the checked attribute from the HTML and to use the same Data Type in the model and it worked.

<input type="radio" formControlName="radioValue1" value="2"> // value is string

value='2' is set as string, then in the model I used:

this.model.value1 = '1'; // value here is string too
this.myForm = this.formBuilder.group({
  radioValue1: [model.value1, [Validators.required]],
});

Answer 1

You can remove the checked attribute. Actually, if you have the value in the form control, it should automatically be selected. If it doesn't work, you need to check the type of the value.In template you defined value as number and please confirm that you have number type in form control also.

Also I can see that you didn't declare the radioModel in ts file. Therefore instead of radioModel, try using model.

UPDATE

ngOnInit(): void {
  this.radioModel = new Model();
  this.radioModel.value1 = 1;

  this.myForm = this.formBuilder.group({
    radioValue1: [model.value1, [Validators.required]],
  });
  this.f.radioValue1.valueChanges.subscribe(() => {
    console.log('radioValue1: ' + this.f.radioValue1.value);
  });
}

Use this in ts file.