angular - ngOnInit にバリデーターを追加すると、ExpressionChangedAfterItHasBeenCheckedError が発生する

Question

入力にカスタム バリデータを追加しようとしていますが、そうすると、何かが TRUE から FALSE に変更されたことを示す ExpressionChangedAfterItHasBeenCheckedError エラーが発生します。

問題を以下の行までたどりました。

ngOnInit(): void {
    this.ipv4Fields.addControl('gateway', new FormControl('', [TabValidator.ipaddress()]));
}

TabValidator.ipaddress() を削除すると、エラーは消えます。同様に、バリデーターが「null」を強制的に返すと、エラーはなくなります。私のバリデーターは次のとおりです。

private static _ipaddress(address: string): any {
    console.log('checking ip address: '+address+' valid: '+ip.isV4Format(address)+' is null: '+(address === null ? 'yes' : 'no'));
    if (!ip.isV4Format(address)) { return { 'wrongFormat': true }; }
    console.log('returning null');
    return null;
}
public static ipaddress(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        console.log('validator returning: '+TabValidator._ipaddress(control.value));
        return TabValidator._ipaddress(control.value);
    };
}

コンソール ログから、バリデータが毎回同じ値を返しているように見えます。

誰かがここで何がうまくいかないのか説明できますか? 上記の行にはブール値が含まれていないため、どの変数が「true」から「false」に変化しているのか説明できません。バリデーターがコンソール ログに表示されずに異なる値を返すにはどうすればよいですか?

私は ngOnInit で何かをしないことについて SO の質問を 1 つ読みましたが、それは赤いニシンのようです。

---

更新：試しました：

ngOnInit(): void {
    Promise.resolve().then(() => {
    this.ipv4Fields.addControl('gateway', new FormControl('', [TabValidator.ipaddress()]));
    });
}

そしてまた

ngOnInit(): void {
  setTimeout(() => this.ipv4Fields.addControl('gateway', new FormControl('', [TabValidator.ipaddress()])), 10);
}

しかし、エラーは次のように変わります：

エラー エラー: 次の名前のコントロールが見つかりません: 'gateway'

---

解決：

これをバグにまでたどりました-リアクティブフォーム+バリデーター+ ngbタブの使用。タブのコントロールにバリデーターを追加すると、エラーが発生します。唯一の解決策は、テンプレート フォームに変更することです。