ExpressionChangedAfterItHasBeenCheckedError: angular

Question

I am building a page that has tabs - those tabs are dynamics from the DB but to make it simple I defined it manually.

Each tab has a the same radio buttons (there is also a save button and more but to make it simple - I removed it).

When I choose one of the radio buttons I am getting this error

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ui-state-active: false'. Current value: 'ui-state-active: true'.
at viewDebugError (core.js:9817)

Also after clicking it again there is no error

Basically the question is how to create radio buttons inside a dynamic tab.

I read this: https://blog.angular-university.io/angular-debugging/

and this: https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

but since I am new to Angular - I can't understand how to solve my problem.

Here is the full code

  <p-tabView>
  <p-tabPanel [header]="category" *ngFor="let category of categoriesList; let i = index" [selected]="i == 0">
    <br>

    <div class="ui-grid-row">
      <h3>Service experience for {{category}}</h3>
    </div>
    <div class="ui-grid-row">
      <div class="ui-g-6">
        <div class="ui-g-12">
          <p-radioButton name="quickFeedBackGrade" value="1" label="Very poor"
                     [(ngModel)]="categoryGrade" ></p-radioButton>
        </div>
        <div class="ui-g-12">
          <p-radioButton name="quickFeedBackGrade" value="2" label="Poor"
          [(ngModel)]="categoryGrade" ></p-radioButton>
        </div>
        <div class="ui-g-12">
          <p-radioButton name="quickFeedBackGrade" value="3" label="Good"
          [(ngModel)]="categoryGrade" ></p-radioButton>
        </div>
        <div class="ui-g-12">
          <p-radioButton name="quickFeedBackGrade" value="4" label="Very good"
          [(ngModel)]="categoryGrade" ></p-radioButton>
        </div>
        <div class="ui-g-12">
          <p-radioButton name="quickFeedBackGrade" value="5" label="Ecxelent"
          [(ngModel)]="categoryGrade" ></p-radioButton>
        </div>
      </div>

    </div>

  </p-tabPanel>
</p-tabView>

and the tab.ts holds only the tab building

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit {

  categoriesList: any = ['tab1' , 'tab2' , 'tab3' , 'tab4' ];

  constructor() { }

  ngOnInit() {
  }
}

Answer 1

It looks like you'll need to create a categoryGrade for each tab.

Change it to an array, like so: categoryGrade = []; , then change your ngModel so that it becomes [(ngModel)]="categoryGrade[i]" .

This way, each tab will have it's own value for categoryGrade , and the problem will no longer occur.

Here is a working StackBlitz