-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mat-hint causing an ExpressionChangedAfterItHasBeenCheckedError if respective input has a *ngIf directive #16209
Comments
This should not be marked as closed. While true that running in production mode won't raise this error, that's just because production is no longer running with this safety check on (for efficiency). The bug still exists and should still be addressed. |
Same error for same reason, any news? Thanks! |
Hello I am having this error using mat-form-field with several inputs with a *ngIf each:
But when I create a mat-form-field for each input and apply the *ngIf to them, the error disappears:
Hope this helps. |
I'm also having this same issue. Mainly because I've made a dynamic form builder and every generated component shared the name component, and if I were to put one on each field condition, I would also have to put one , copying and pasting the same code over and over. |
Unfortunately because of angular/components#16209 we cannot very well use *ngIf inside a <mat-form-field> so we have no choice but duplicate the whole thing and maintain both copies in parallel
#8626 is somewhat related as it could have been a workaround for this issue, but it does not work either as explained over there. |
We are building a component library which is very inspired by angular material :) we use the concept of the formfield with some modifications but run into the same issue. What I found out is that with the ngIf on the input the instantiation changes. With ngIf the cycle is like:
Without ngif the cycle is:
A possible solution I found is to defer all calls of |
That a bug, im running into the same problem
if the only workaround is code duplication ... |
The same problem appears with both |
"Avoid using |
I think its not about avoiding when an Every time a |
@joaodforce Thank you so much, it has actually led me to a much better solution! However, I'd still say there is a but in angular-material here, and I'm not sure if avoiding ngIf/ngFor is always possible. I could not get it to work within mat-stepper, which actually relies on step components being in DOM while I need to dynamically control what steps there are. Here's another workaround:
|
Try use Unique ID for the hint. A simple hack to make the error go away <mat-hint [id]="null">No error</mat-hint> |
Would be wonderful for this to be addressed. A use-case where an *ngIf would be needed is in a case dealing with Countries and States --where a text-entry of State is allowed but then switches to a drop-down for certain countries (e.g. US) as follows:
|
I suspect this would be solved by addressing this framework issue: angular/angular#37319 |
for now i still have the same problem. |
This issue can be solved simply by injecting into the constructor |
Error: <mat-hint *ngIf="dropdownOptions.hint">{{dropdownOptions.hint}}</mat-hint> No Error using @zlodeev 's answer. <mat-hint *ngIf="dropdownOptions.hint" [id]="null">{{dropdownOptions.hint}}</mat-hint> |
works with |
Hi Guys regarding #8626 and this issue, there's currently no way to use
Do you see a good workaround here to avoid code duplication into the component template? |
Fixes angular#16209: ExpressionChangedAfterItHasBeenCheckedError that occurs when chip-lists are content-projected into a mat-form-field
…gular#24292) Fixes angular#16209: ExpressionChangedAfterItHasBeenCheckedError that occurs when chip-lists are content-projected into a mat-form-field
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
…gular#24292) Fixes angular#16209: ExpressionChangedAfterItHasBeenCheckedError that occurs when chip-lists are content-projected into a mat-form-field
Reproduction
Minimal repro on StackBlitz. Open the console to see the following error message:
This always happens if the respective input has a
*ngIf
-directive. I couldn't observe any subsequent errors caused by this. Using thehintLabel
property instead of a<mat-hint>
results in the same error.Expected Behavior
No
ExpressionChangedAfterItHasBeenCheckedError
when using *ngIf on an inputActual Behavior
ExpressionChangedAfterItHasBeenCheckedError
Environment
^7.1.4
^7.2.0
The text was updated successfully, but these errors were encountered: