components: Textarea in MatForMield can cause ExpressionChangedAfterItHasBeenCheckedError

Here’s a workaround until I can investigate, just use value="" instead of putting the text as content: https://stackblitz.com/edit/angular-material2-issue-y2tqhg?file=app/app.component.html

I had a similar issue and in my understanding the issue is that:

1. mat-form-field creates a form field with an empty value - the mat-label is displayed inside (thus mat-form-field-should-float: false)
2. Interpolation creates the value that should be placed as the textarea value.
3. The mat-form-field receives the new value and decides that now the label should float (mat-form-field-should-float: true)

In case with value="...", (2) happens before (1), so there’s no problem. That’s also why it happens with textarea, but not with input.

(For the record: I came here debugging a similar error in test - in my case the textarea received the value from ngModel. I ended up working around it by adding floatLabel="always" on the mat-form-field.)

P.S. I had one more similar problem - this time it was: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-focused: false'. Current value: 'mat-focused: true'.. This was because I focused the field in ngAfterViewInit. When I moved the focusing to ngAfterContentInit, this problem was also gone.

Hi, I’ve got both errors mat-form-field-should-float and mat-focused for ExpressionChangedAfterItHasBeenCheckedError when using <input autofocus> inside a mat-form-field with Angular Material v6.

I can bypass the errors by using floatLabel=never and focusing the input in ngAfterContentInit() but it would be awesome to avoid using these approaches.

Getting the same error here, too.

@fxck I’ve concluded that sometimes you just have to add delay(0) to the observable pipe to get it to update later than it wants to.

I’ve gone round and round in circles at various times on this - reread articles and SO posts but sometimes it just seems necessary.

I did create a pipeable operator that adds delay(0) so then I can put isLoggedIn$ | delay | async

I don’t have it to hand now but it’s trivial to write a pipeable operator as long as you remember to export and provide it properly.

<textarea matInput readonly>{{selectedList.summary}}</textarea> error <textarea matInput readonly [(ngModel)]="selectedList.summary"></textarea> works fine

Try this

<mat-form-field floatLabel="never"> <input placeholder="My Placeholder" matInput> </mat-form-field>

I’m getting the same error but only in unit tests.