Expression ___ has changed after it was checked

Question

Why is the component in this simple plunk

@Component({
  selector: \'my-app\',
  template: `
I\'m {{message}} 
`,
})
export class App {         


        

Answer 1

In my case, it happened with a p-radioButton. The problem was that I was using the name attribute (which wasn't needed) alongside the formControlName attribute like this:

I also had the initial value "T" bound to the isApplicant form control like this:

isApplicant: ["T"]

I fixed the problem by removing the name attributes in the radio buttons. Also, because the 2 radio buttons have the same value (T) which is wrong in my case, simply changing one of then to another value (say F) also fixed the issue.