宣言される前にビュー変数にアクセスする

Question

フォームの検証はngクラスから機能し、場合によってはクラスを1つ上のレベルまで親コンテナにコピーしたいと考えています。

<div [ngClass]="{'ng-invalid': input.invalid, 'ng-valid': input.valid, 'ng-pristine': input.pristine}"> 
    <input [name]="control.id" [(ngModel)]="control.value" required #input="ngModel"> 
</div> 

これは、ほとんどの部分は動作しますが、私は、コンソールに次のエラーを取得しています：

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

は、それが定義される前に、私はビュー変数を参照することができます方法はありますか？

Answer 1

特定の変数を定義することが確実でない場合は、Elvis演算子を使用できます。

<div [ngClass]="{'ng-invalid': input?.invalid, 'ng-valid': input?.valid, 'ng-pristine': input?.pristine}"> 
    <input [name]="control.id" [(ngModel)]="control.value" required #input="ngModel"> 
</div> 

おそらく、ngClassと入力をカプセル化する新しいコンポーネントを作成できますか？ input.xxxは、FormControlsを使用する必要があるように見えます。これらは有効/無効/原始的なものです。