Alter host styling from directive

Question

I have the following:

<custom-form-control>
    <input [myDir]="disableValidationStyles" />
</custom-form-control>

@Component({
    selector: 'custom-form-control',
    ...
})
export class CustomFormControlComponent implements ControlValueAccessor {
    constructor(public hostRef: ElementRef) { }

    @HostBinding(class.custom-form-control) defaultClass = true;

    disableValidationStyles: boolean = true;
    ...
}

@Directive({
    selector: '[myDir]'
})
export class MyDirective {
    // get reference to host and remove style classes
    // OR
    // prevent validation of form control (and Angular automatically applying 
    // validation styles)
}

myDir should remove any styling associated with the validation of custom-form-control (e.g. ng-valid, ng-touched, ng-dirty). Styles are applied to the host of CustomFormControlComponent using HostBinding. Generally I've tried the following two methods but to no avail:

1. Get reference to the host component (e.g. DI ViewContainerRef into MyDirective) and try to change the styles
2. Prevent / alter validation within the directive (e.g DI NgControl in MyDirective and using reset())

Also tried most of the suggestions from these:

How to access host component from directive?

https://github.com/angular/angular/issues/8277

I feel like I've exhausted the options at this point except maybe using a service to coordinate the status changes from the form control but that feels like a very clunky solution. Ideally, I'd like to just disable the validation whenever the directive is applied with the flag (disableValidationStyles) set.

Appreciate any insights, thanks.

Answer 1

I found a solution using injected NgControl by setting the control property to pristine using markAsPristine (styles were set based on ng-touched, ng-dirty classes).