Angular：将查询参数绑定到 ExpressionChangedAfterItHasBeenCheckedError 中的表单字段结果

Question

I created a simple directive which takes input from a queryparam and patches the value of a form input. The directive works fine, but I'm receiving this error ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: 'testuser@test.be' ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: 'testuser@test.be' ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: 'testuser@test.be' .

I searched for solutions on SO / Google and tried a few like putting the logic of ngOnInit of my directive in ngAfterContentChecked or ngAfterContentInit, but the error is still there... Can anybody point me in the right direction to solve this?

Directive 'bindQueryParamToInput'

import { Directive, Input } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[bindQueryParamToInput]'
})
export class BindQueryparamToInputDirective {
  @Input('bindQueryParamToInput') paramKey: string;

  constructor( private ngControl : NgControl) { }

  ngOnInit() {
    const queryParams = new URLSearchParams(location.search);

    if (queryParams.has(this.paramKey)) {
      this.ngControl.control.patchValue(queryParams.get(this.paramKey));
    }
  }

}

component.html in which the directive is used on email field

<div class="form-group" formGroupName="localAccountData">
    <label>Emailadres</label>
    <input formControlName="email"
           type="text" 
           class="form-control"
           placeholder="Email (login)"
           bindQueryParamToInput="e">
</div>

component.ts where the form is initialized

@Component({
  selector: 'gimmi-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  registrationForm: FormGroup;

  constructor( ) { }

  ngOnInit(): void {
    this.registrationForm = new FormGroup ({
      'personData': new FormGroup({
        'firstName': new FormControl(null, Validators.required),
        'lastName': new FormControl(null, Validators.required),
        'birthday': new FormControl(null, Validators.required)
      }),
      'localAccountData': new FormGroup({
        'email': new FormControl(null, [Validators.required, Validators.email]),
        'password': new FormControl(null, [Validators.required])
      })
    });
  }
}

EDIT : The accepted solution works in the above scenario. But now I've put the email field in a separate component (the directive is now used in the subcomponent) and now the ExpressionChangedAfterItHasBeenCheckedError is back... :-(

I already tried to use the solution and add this.ref.detectChanges() in the ngOnInit of the subcomponent, but it didn't work...

Is there something extra I need to do to solve this problem in the subcomponent?

subcomponent email-input.ts

import { Component, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'email-input',
  templateUrl: './email-input.component.html',
  styleUrls: ['./email-input.component.css']
})
export class EmailInputComponent implements OnInit {
  @Input() parentFormGroup: FormGroup;

  constructor() { }

  ngOnInit(): void {
    this.parentFormGroup.addControl( 'email', new FormControl(null, [Validators.required, Validators.email]));
  }
}

subcomponent email-input.html (where the directive is used)

div [formGroup]='parentFormGroup'>
        <input  formControlName="email" 
                type="text" 
                class="form-control" 
                placeholder="Email (login)" 
                bindQueryParamToInput="e">
</div>

In the component.html, I only use the <email-input></email-input> component now.

Answer 1

Another "standard" solution would be imperatively ordering change detection.

  constructor( private ngControl : NgControl, private ref: ChangeDetectorRef) { }

  ngOnInit() {
    const queryParams = new URLSearchParams(location.search);

    if (queryParams.has(this.paramKey)) {
      this.ngControl.control.patchValue(queryParams.get(this.paramKey));
      this.ref.markForCheck();

      // or, alternatively
      this.ref.detectChanges();
    }
  }

Answer 2

I solved the problem I described in the edit by changing putting a setTimeout around the line that update form control value.

setTimeout(() => {
  this.ngControl.control.patchValue(queryParams.get(this.paramKey));
});

This works, but it feels like a workaround and not like a solid solution... So any help to get a better solution is much appreciated