1

I'm getting an Expression changed after it was checked error in the browser console.

The issue comes from passing an object into a component and then trying to update the object in the component and seeing the changes in the parent. This is what I've tried:

<employee-form [employee]="employee" (update)="updateEmployee($event)"></employee-form>

and

<employee-form [(employee)]="employee"></employee-form>

and in both cases I get the same error.

I know that from this in the Angular docs that an object should be the same reference after change detection. And that's the issue here is that it isn't. So is there a way for me to pass that employee object into the employee form component, have it be changed and see those changes in the parent component?

pjlamb12
  • 2,300
  • 2
  • 32
  • 64
  • add the component code which you have implemented – Aravind Mar 21 '17 at 17:54
  • There's not a lot of code to share. It's just a form, wrapped in a component so that I can reuse it in a couple spots. When a field is updated, it runs a function that emits the employee: `emplyeeChange.emit(this.employee)`. – pjlamb12 Mar 21 '17 at 18:21
  • Refer to this [**answer**](http://stackoverflow.com/questions/34948961/angular-2-custom-form-input/34998780#34998780) to implement your expectation – Aravind Mar 21 '17 at 18:24
  • I don't think that's what I'm looking for. I'm not looking to create custom form controls. I just want the parent component to pass the child component an object by reference. Or, when the child component updates the object and emits the object to the parent, the parent to be able to reassign its object reference to the new one without getting this error. Implementing custom form controls is not feasible and not what I'm looking for. – pjlamb12 Mar 21 '17 at 18:52
  • what does your child component has? and at which event you want to access them(on click of a a button ,on text change of txtbox) – Aravind Mar 21 '17 at 18:55
  • The child component has a form, where you can input the name of the person, address, phone, etc. When switching focus from one text input to the other, or when selecting an item from the dropdown, I want to update the parent component's object with the changes. – pjlamb12 Mar 21 '17 at 18:58
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/138670/discussion-between-aravind-and-pjlamb12). – Aravind Mar 21 '17 at 19:09
  • Guess you can use this [**answer**](http://stackoverflow.com/questions/42596458/how-can-i-detect-the-inner-html-change-in-a-div-with-angular-2/42596914#42596914) then. need more help reach me out in fb @ aravind2109 waited for you in discussion chat but – Aravind Mar 21 '17 at 19:13
  • Sometimes, it's not clear at all but you can get `Expression changed after it was checked` if there's an error occuring ... Make sure to read carefully your error stack – maxime1992 Mar 21 '17 at 19:18

0 Answers0