Angular 2 Modal Popup Error“检查后，表达式已更改".

本文介绍了Angular 2 Modal Popup Error“检查后，表达式已更改".的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个非常简单的应用程序，其中包含一个应用程序组件，一个子组件(帐户)，处理消息对话框组件(弹出模式)的警报服务.

I have a very simple app with an app component, a child component (account), alert service that handles a message dialog component (popup modal).

出于演示目的，我有两种相同的形式，一种在app.component.ts内部，另一种在account.component.ts内部.他们每个人都有一个按钮，该按钮调用警报服务以显示消息对话框模式.

For demonstrating purpose, I have two identical forms, one inside app.component.ts and one inside account.component.ts. Each of them has a button that calls the alert service to show the message dialog modal.

问题是，当我在子组件(account.component.ts)的表单的输入字段中单击并按键盘上的Enter"时，会出现此错误

The problem is that when I click in the input field of the form for the child component (account.component.ts) and "press enter on my keyboard", I get this error

如果我单击按钮而不是按键盘上的Enter键

If I click the button instead of pressing enter on keyboard

app.componen.ts中的表单似乎没有任何问题，即使我按Enter键也是如此.似乎只是子组件(accouunt.component.ts).

The form from app.componen.ts does not seem to have any issue even when I press enter. It seems to be just the child component (accouunt.component.ts).

如果我单击account.component的输入，请输入内容，单击按钮，没有错误显示，删除输入，按Enter，与以前相比现在没有错误

If I click the input for account.component, enter something, click the button, no error shown, delete the input, press enter, no error shown now comparing to before

我已经研究过SO和google，看来人们也遇到了同样的问题，并通过调用更改检测来解决它.但是，我已经尝试过将其放在显示模态之后的地方，但是它不起作用.同样，如果这可以解决问题，那么它也无法解释为什么app.component.ts中的表单没有引起我这个错误.

I have look into SO and google and it seems like people are having the same issue and resolving it by calling change detect. However, I have tried that and put it in places such as just after modal is shown and it didn't work. Also, if that would solve it, then it doesn't explain why the form in app.component.ts does not cause me this error.

下面是一些代码片段，完整的演示项目可以在上面的github链接上找到.这个问题困扰了我好几天了.非常感谢您的帮助.

Below are some code snippets, the full demo project can be found on the github link above. This problem has be troubling me for days. Much appreciated for the help.

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

导出类AccountComponent实现OnInit {

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 over night
        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() {
  }

}

推荐答案

似乎您的错误在执行以下代码后发生:

Seems your error occurs after execution following code:

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

事件，将您的控件标记为touched.

on input is fired blur event that marks your control as touched.

不适用于AccountComponent，因为AccountComponent中的检测更改发生在ngbModalContainer之前，而app.component.html中的FormGroup获得正确的值.

It doesn't work for AccountComponent because detection changes in AccountComponent occurs before ngbModalContainer while FormGroup within app.component.html gets right values.

可能的解决方案:

1)在打开模式之前将控件标记为已触摸

1) mark your controls as touched before opening modal

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 Modal Popup Error“检查后，表达式已更改".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！