演示应用程序的 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() {
}
}