在声明视图变量之前访问它

Question

My form validation works off the ng classes and in some cases I want to copy the classes up one level to the parent container.

<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>

This works for the most part, but I am getting the following error on the console:

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

Is there a way I can reference a view variable before it is defined?

Answer 1

If you aren't certain that a certain variable will be defined you can use the Elvis operator.

<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>

Perhaps you could create a new component that encapsulates the ngClass and the input? The input.xxx make it look like you should be using FormControls: they do the valid/invalid/pristine stuff for you..