See the problem in action on YouTube
Check out the GitHub repository for the demo app
My simple app consists of an app component, a child component (account), and an alert service that handles a message dialog component (popup modal).
To demonstrate the issue, I have two identical forms—one inside the app.component.ts and one inside account.component.ts. Each form has a button that triggers the alert service to display a message dialog modal.
The problem arises when I click on the input field of the form in the child component (account.component.ts) and then "press enter on my keyboard". This action results in the following error:
EXCEPTION: Error in ./AccountComponent class AccountComponent - inline template:2:2 caused by: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. Please note that this error does not occur in any other scenario mentioned below.
If I click the button instead of pressing enter on the keyboard
The form in app.component.ts does not seem to have any issues even when I press enter. The error only occurs in the child component (account.component.ts).
If I click the input for account.component, enter something, click the button, no error is shown. Then if I delete the input, press enter again, no error is shown, contrary to before.
I have searched on Stack Overflow and Google, and it appears that others are facing similar issues which they resolved by calling change detection. However, I tried implementing this solution like triggering change detect just after the modal is displayed, but it did not work. Besides, the fix does not explain why the form in app.component.ts does not trigger this error.
Below are snippets of the code. You can find the complete demo project on the GitHub link above. This problem has been bothering me for days, so any help would be greatly appreciated.
app.component.html
<label>This form is from app.component.html</label>
<form name="form" [formGroup]="changePasswordForm" (ngSubmit)="onUpdatePassword()">
<input placeholder="Old Password" formControlName="oldPassword">
<button class="btn btn-success">Update Password</button>
</form>
<br><br><br><br>
<label>This form is from account.component.html</label>
<router-outlet> </router-outlet>
<template ngbModalContainer></template>
app.component.ts
export class AppComponent implements OnInit {
private changePasswordForm: FormGroup;
constructor(
private formBuilder: FormBuilder,
private alertService: AlertService,
) { }
ngOnInit() {
this.changePasswordForm = this.formBuilder.group({
oldPassword: [''],
})
}
onUpdatePassword() {
this.alertService.alertPopup('test2', 'asfafa')
}
}
account.component.html
<form name="form" [formGroup]="changePasswordForm" (ngSubmit)="onUpdatePassword()">
<input placeholder="Old Password" formControlName="oldPassword">
<button class="btn btn-success">Update Password</button>
</form>
account.component.ts
export class AccountComponent implements OnInit {
private changePasswordForm: FormGroup;
constructor(
private formBuilder: FormBuilder,
private alertService: AlertService,
) { }
ngOnInit() {
this.changePasswordForm = this.formBuilder.group({
oldPassword: [''],
})
}
onUpdatePassword() {
this.alertService.alertPopup('test2', 'asfafa')
}
}
alert.service.ts
@Injectable()
export class AlertService {
private subject = new Subject<any>();
private keepAfterNavigationChange = false;
constructor(
private router: Router,
private modalService: NgbModal,
) { }
alertPopup(title: string, content: string) {
// open modal to check if worked overnight
const modalRef = this.modalService.open(MessageDialogComponent);
modalRef.componentInstance.titleText = title
modalRef.componentInstance.bodyText = content
modalRef.result
.then(response => {
})
.catch(() => {
return
})
}
}
message-dialog.component.html
<div class="modal-header">
<h4 class="modal-title">{{titleText}}</h4>
</div>
<div class="modal-body">
<p>{{bodyText}}</p>
</div>
message-dialog.component.ts
export class MessageDialogComponent implements OnInit {
@Input() titleText: string;
@Input() bodyText: string;
constructor(
public activeModal: NgbActiveModal,
) { }
ngOnInit() {
}
}