使用单选按钮组打开 Angular 模态 window 会导致 ExpressionChangedAfterItHasBeenCheckedError

Question

I am new to Angular and have tried to follow the lifecycle hooks, but apparently, I do not completely understand them.

In my project, I have a Radio Button Group contained inside a modal window. The modal is opened via button click at the user request, so nothing automatic. The monthly option needs to be selected by default when the window is displayed.

When the modal window is opened, I get the following error in my dev tool console:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'focus: undefined'. Current value: 'focus: true'.

Things that I have tried:

• On modal open, manually setting the radio group to blur.
• Before modal open, manually setting the radio group to blur.
• Before and after the modal opening using ChangeDetectorRef to update any changes.

At this point, I am stumped and would appreciate some guidance.

HTML of the modal with radio button group:

  <ng-template #subscriptionOptions let-modal>
    <form #subForm='ngForm'>
    <div class="modal-body" id="subInfo">
      <section class="widget">

          <h4>
            <fa-icon [icon]="['far','check-square']"></fa-icon>
            {{ currentUser.firstName }}, please choose and activate your subscription
          </h4>

        <div name="subType" id="subType" class="btn-group btn-group-toggle" ngbRadioGroup [(ngModel)]="subType" style="margin-left: 117px">
          <label class="BG-Def" ngbButtonLabel>
            <input name="monthly" id="monthly" type="radio" [value]="'monthly'" ngbButton  (click)="subType = 'monthly'">
            Pay Monthly
          </label>
          <label class="BG-Def" ngbButtonLabel>
            <input name="annual" id="annual" type="radio" [value]="'annual'" ngbButton  (click)="subType = 'annual'">
            Pay Annualy (Save 20%)
          </label>
        </div>


              <div class="row">
                <div class="col-md-8 col-md-offset-3">
                  <button type="submit" class="btn btn-danger">Activate Subscription</button>
                  <button type="button" class="btn btn-default" (click)="closeSubOptions()">Cancel</button>
                </div>
              </div>



      </section>
    </div>
    </form>
  </ng-template>

I am setting the subType value inside of my constructor:

constructor(private modalDialogService: ModalDialogService) {
this.subType = 'monthly';
}

Then here is how I am opening the modal itself:

HTML Button:

(click)="this.openSubOptions(subscriptionOptions)"

Typescript:

  public openSubOptions(modal) {
      this.modalService.open(modal, {size: 'lg', windowClass: 'subModal'});
  }

ngOnInit and ngAfterViewInit

public ngOnInit() {
    this.passChange = false;
    this.navBar.updateUser.subscribe((result) => {
      this.currentUser = this.auth.getLoggedInUser();
    });
    this.currentUser = this.auth.getLoggedInUser();
    this.getSessionExpiration();
    this.timer = setInterval(() => {
      this.onTimeoutTick();
    }, 1000);
    this.dialogCallback.subscribe(() => this.resetTimer());
  }

  public ngAfterViewInit() {
    this.cd.detectChanges();
  } 

Answer 1

I ended up finding a work around the draws focus away from my Radio Group.

I added an invisible input before my radio group that seems to prevent the change error from occurring.

<input type="text" style="display:none" />