CODEWITHSUNDEEP
angularbindingradio-buttonangular6angular-forms
eclipse
eclipse

Reputation: 1

Angular - Default Radio Button Value not checked

I all. I'm not an Angular expert and I'm stuck on a problem I can't resolve! :(

This is the scenario: there is a modal with 2 tabs and in each tab there is a form with group of radio buttons. (the component is the same)

  1. In TAB1, the radio buttons are valued from a const defined in environment.ts file.
  2. In TAB2, the radio buttons are valued from a REST Api response. What I want is that radio button is checked as default if the property "checkedFirst" is true.

This is the const that values TAB1

export const ColorsForRadio: Colors[] = [
  {
    id: '1',
    name: 'red',
    checkedFirst: false
  },
  {
    id: '2',
    name: 'green',
    checkedFirst: true
  }
]

This is REST Api Response that values TAB2

 {
    id: '1',
    name: 'red',
    checkedFirst: false
  },
  {
    id: '3',
    name: 'blue',
    checkedFirst: true
  },
   {
    id: '5',
    name: 'yellow',
    checkedFirst: false
  }

This is html

<div *ngFor="let color of colorsForRadio$ | async">
      <label class="radio-label">
        <input type="radio" formControlName="colorsForRadio" class="radio" [value]="color" [checked]="color.checkedFirst"/>
        {{ color.name }}
      </label>
    </div>

I have 2 kind of problems:

  1. when I open the modal, in TAB1 the radio Button "green" is not checked even if the value of "checkedFirst" is read correctly. If I move on TAB2 and after came back to TAB1, the radio button "green" turns correctly checked. This problem verifies only with TAB1 because in TAB2 the right radio (the "blue" one) is checked correctly since the first time. It can dependes on the const?
  2. even if radio button is checked (at least graphically) it is not considered as checked because validation control on submit form event fails. This problem verifies on both tabs.

Can someone give me suggestions on how to solve? Thank you

Upvotes: 0

Views: 3124

Answers (1)

Ashish Ranjan
Ashish Ranjan

Reputation: 12950

I would do it by setting the control value in the typescript file, but for that I would need to avoid the async pipe from the template but rather do the subscription the .ts and set value to the formControl accordingly.

lets say you have a variable apiData which you use to get the data from API and use it to loop over in the template.

Something like:

ngOnInit() {
  this.parentForm = new FormGroup({
    'color': new FormControl()
  })

  this.getData().subscribe((data) => {  // getData() is request to the API
    // find the data which was true,
    let defaultValue = data.find(eachData => eachData.checkedFirst);
    if (defaultValue) {
      this.parentForm.get('color').setValue(defaultValue.name)
    }
    this.apiData = data;
  })
}

Your HTML will be like:

<form [formGroup]="parentForm">
  <div *ngFor="let eachCheckBox of apiData">
    {{eachCheckBox.name}}
    <input type="radio" formControlName="color" [value]="eachCheckBox.name">
  </div>
</form>

See a working example here: https://stackblitz.com/edit/angular-jlgidp?file=src%2Fapp%2Fapp.component.ts

Upvotes: 1

Related Questions