Youtube video demonstrating the problem
Github repository for the demo app
我有一个非常简单的应用程序,包含一个应用程序组件、一个子组件(帐户)、处理消息对话框组件(弹出模式)的警报服务。
为了演示目的,我有两个相同的表单,一个在 app.component.ts 中,一个在 account.component.ts 中。他们每个人都有一个按钮,可以调用警报服务来显示消息对话框模式。
问题是,当我单击子组件 (account.component.ts) 表单的输入字段并“按键盘上的回车键”时,出现此错误
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'. Note that this error dose not occur at any other situation mentioned below
如果我点击按钮而不是按键盘上的回车键
即使我按下 enter,来自 app.componen.ts 的表单似乎也没有任何问题。它似乎只是子组件 (accouunt.component.ts)。
如果我点击 account.component 的输入,输入一些东西,点击按钮,没有显示错误,删除输入,按 enter,现在与之前相比没有显示错误
我查看了 SO 和谷歌,似乎人们遇到了同样的问题并通过调用更改检测来解决它。但是,我已经尝试过将它放在诸如模态显示之后的位置,但它没有用。另外,如果这样可以解决问题,那么它也无法解释为什么 app.component.ts 中的表单不会导致我出现此错误。
下面是一些代码片段,完整的演示项目可以在上面的 github 链接上找到。这个问题困扰我好几天了。非常感谢您的帮助。
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>
应用程序组件.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>
账户.组件.ts
导出类 AccountComponent 实现 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 over night
const modalRef = this.modalService.open(MessageDialogComponent);
modalRef.componentInstance.titleText = title
modalRef.componentInstance.bodyText = content
modalRef.result
.then(response => {
})
.catch(() => {
return
})
}
}
消息对话框.component.html
<div class="modal-header">
<h4 class="modal-title">{{titleText}}</h4>
</div>
<div class="modal-body">
<p>{{bodyText}}</p>
</div>
消息对话框.component.ts
export class MessageDialogComponent implements OnInit {
@Input() titleText: string;
@Input() bodyText: string;
constructor(
public activeModal: NgbActiveModal,
) { }
ngOnInit() {
}
}
最佳答案
您的错误似乎是在执行以下代码后发生的:
ngAfterViewInit() {
if (!this._elRef.nativeElement.contains(document.activeElement)) {
this._renderer.invokeElementMethod(this._elRef.nativeElement, 'focus', []);
}
}
https://github.com/ng-bootstrap/ng-bootstrap/blob/1.0.0-alpha.20/src/modal/modal-window.ts#L65
在 input
上触发 blur
事件,将您的控件标记为 touched
。
它不适用于 AccountComponent
,因为 AccountComponent
中的检测更改发生在 ngbModalContainer
之前,而 FormGroup
在 app.component.html
获取正确的值。
可能的解决方案:
1) 在打开模式之前将您的控件标记为已触摸
account.component.ts
onUpdatePassword() {
Object.keys(this.changePasswordForm.controls).forEach(key => {
this.changePasswordForm.controls[key].markAsTouched();
});
this.alertService.alertPopup('test2', 'asfafa')
}
2) 更改订单标签
app.component.html
<template ngbModalContainer></template>
<router-outlet> </router-outlet>
关于Angular 2 模式弹出错误 "Expression has changed after it was checked",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42323418/