演示应用程序的 Github 存储库 https://github.com/eddy80310/formBug
我有一个非常简单的应用程序，其中包含应用程序组件、子组件（帐户）、处理消息对话框组件（弹出模式）的警报服务。
为了演示目的，我有两种相同的表单，一种位于 app.component.ts 内，另一种位于 account.component.ts 内。它们每个都有一个按钮，用于调用警报服务以显示消息对话框模式。
问题是，当我单击子组件 (account.component.ts) 表单的输入字段并“按键盘上的 Enter”时，出现此错误
异常： ./AccountComponent 类 AccountComponent - 内联模板：2:2 中出现错误，原因是：表达式在检查后已更改。先前值：“true”。当前值：“假”。
请注意，在下面提到的任何其他情况下都不会发生此错误
如果我单击按钮而不是按键盘上的 Enter 键
即使我按 Enter 键，app.component.ts 中的表单似乎也没有任何问题。它似乎只是子组件（account.component.ts）。
如果我单击 account.component 的输入，输入一些内容，单击按钮，不显示错误，删除输入，按 Enter 键，与之前相比，现在不显示错误
我调查了 SO 和 google，似乎人们也遇到了同样的问题，并通过调用更改检测来解决它。但是，我已经尝试过并将其放在诸如模式显示之后之类的位置，但它不起作用。另外，如果这可以解决问题，那么它并不能解释为什么 app.component.ts 中的表单不会导致我出现此错误。
下面是一些代码片段，完整的演示项目可以在上面的 github 链接上找到。这个问题困扰了我好几天了。非常感谢您的帮助。
应用程序组件.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')
}
}
警报服务.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() {
}
}
