Input property doesn't change value

🐞 bug report

Description

I created a component with some input properties. I use two-way binding for one property and change value inside the component and then change it in a parent component. After some actions, value stops changing.

🔬 Minimal Reproduction

An example

1. Change the value of the input.
2. You can see “Validation message”
3. Then type again -> “Validation message” is gone
4. After the next typings message doesn’t appear

But I want to see the message after changes.

🔥 Exception or Error

🌍 Your Environment

Angular Version:

Anything else relevant?

[EmaGht]

when the “change” event of this input

<input (change)="handler($event)" />

gets triggered, you first do this:

this.isValid = true;

and then you emit your output with

this.valueChanged.emit(e.target.value);

on which app.component is listening on, which does this:

this.isValid = false;

Notice that the “isValid” variable of app.component is in turn bound to the ngModel of “my.component”

Basically, before Angular’s change detection can run you are changing the input value twice, bringing it always back to it’s invalid value, therefore Angular cannot pickup any change.

As a test, change this in app.component: valChanged(val: string) { if (val !== "test") { this.isValid = false; } }

to this: valChanged(val: string) { if (val !== "test") { setTimeout(()=> {this.isValid = false}); } }

Welcome to Change Detection

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}