Angular 13: Radio [checked] not working with formControlName-CodePudding

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 >
      <input  type="radio" formControlName="radioValue1"
             id="radioStopLossNone" [checked]="radioModel.value1==1"
             value="1">
      <label  for="radioStopLossNone">None</label>
    </div>
    <div >
      <input  type="radio" formControlName="radioValue1"
             id="radioStopLossFixed" [checked]="radioModel.value1==2"
             value="2">
      <label  for="radioStopLossFixed">Value-1</label>
    </div>
    <div >
      <input  type="radio" formControlName="radioValue1"
             id="radioStopLossTrailing" [checked]="radioModel.value1==3"
             value="3">
      <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.

CodePudding user response：

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.

CodePudding user response：

You're not correctly getting radioValue1

Use this code :

HTML :

<div >

    <input  type="radio" formControlName="radioValue1" 
         [checked]="radioModel.value1 === 1" [value]="1">
    
    <label  for="radioStopLossNone">None</label>
</div>

<div >

    <input  type="radio" formControlName="radioValue1" 
        [checked]="radioModel.value1 === 2" [value]="2">
    
    <label  for="radioStopLossFixed">Value-1</label>
</div>

<div >
    <input  type="radio" formControlName="radioValue1"  
        [checked]="radioModel.value1 === 3" [value]="3">
    
    <label  for="radioStopLossTrailing">Value-2</label>
    
</div>

TS :

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

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

In the TS code you get the form control value by using myForm.controls["radioValue1"] and do operations on it.

In HTMl code you set input values by [value] attribute not reqular `value' attribute.

And correctly check if it matches by changing == to ===