I'm looking to update styles based on the state of NgModel.control. To keep it DRY, I was thinking that a directive for reading the NgModel component state could be the solution.
Is this actually feasible? I haven't been able to find any guidance on how to accomplish this.
The concept is that I can write code like this:
<div class="fields">
<app-dummy-selector name="dummy"
[(ngModel)]="dummy" required appValidationError>
</app-selector-moneda>
</div>
Then, my directive would be defined as follows:
@Directive({
selector: '[appValidationError]'
})
export class validationError {
// Implement logic to add styles using Renderer2 or ElementRef
// based on NgModel control state
constructor(private el: ElementRef, private renderer: Renderer2) { }
}
To clarify further, what I want to avoid is adding
#ctrl="ngModel" [ngClass]="{ error: (ctrl.invalid) && ctrl.touched }"<div class="fields">
<app-dummy-selector name="dummy"
#ctrl="ngModel" [ngClass]="{ error: (ctrl.invalid) && ctrl.touched }"
[(ngModel)]="dummy" required appValidationError>
</app-selector-moneda>
</div>