0

I’m working in an angular application, and I’m getting the following error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false’.

I have an input field that looks like this:

<input matInput type="text" [(ngModel)]="description" #descriptionInput />
{{ descriptionInput.focus() }}

My component looks like this:

@Component({
  selector: 'app-watermelon-dialog',
  templateUrl: './watermelon-dialog.component.html',
  styleUrls: ['./watermelon-dialog.component.scss']
})
export class WatermelonDialogComponent extends GeneralDialogComponent implements OnInit {

  public description : string;

  constructor(
    public dialogRef: MatDialogRef<GeneralDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public dialogData: GeneralDialogModel,
    ngDynFormService: DynamicFormService,
    public generalDialogService: GeneralDialogService) {
      super(dialogRef,
        dialogData,
        ngDynFormService,
        generalDialogService);
  }

  ngOnInit() {
    this.description = this.dialogData.extra;
  }
}

Does anyone know why I’m get that error? And how can I get rid of it? Thanks.

Gibran Shah
  • 871
  • 3
  • 15
  • 34
  • 1
    Because of displaying something as it's supposed to do, the interpolation you have right after the input gives the focus to the input field. So at every change detection, you're going to give the focus to that field. That doesn't make sense. Don't do that. Remove that interpolation. – JB Nizet Nov 28 '18 at 23:10
  • Removing the interpolation indeed fixed the problem. Thanks for that JB. But now I can't focus my input field. I created another question here: https://stackoverflow.com/questions/53544625/elementref-is-undefined – Gibran Shah Nov 29 '18 at 17:38

0 Answers0