In this article, we’ll examine creating Angular Directives that interact with the Angular Forms controls.

We’ll do that by creating an attribute directive which hooks into the underlying form control and changes the directive’s host element border.

The directive will support both, template driven and reactive forms.

Directive’s API

We start by creating the directive and defining its API. The @Input names are prefixed with the directive’s selector. We rename them to keep the variables names short and easier to read, and we set some sensible defaults.

The colors dictionary has the possible form validation states as keys, and will be used to style the border.

NgControl

To create a truly reusable directive we should support both, template and reactive forms. But what exactly do we Inject? The user can use any of the following:

NgModel (Template Driven Forms)

<input [(ngModel)]="value" appValidationBorder>

FormControlName (Reactive Forms)

<input formControlName="value" appValidationBorder>

FormControlDirective (Reactive Forms)

<Input [formControl]="value" appValidationBorder>

Luckily for us, they all are all provided as the NgControl .

That means that we can inject the NgControl , and the Angular DI framework will provide us the closest form control directive. We also make sure to limit the injection with the @Self decorator.

constructor(@Self() ngControl: NgControl) {}

By using NgControl we get access to properties like control value, validation status, errors and more.

Most of the properties fall through to the AbstractControl class you are probably familiar with if you have worked with Angular Forms before.

Host Binding

Now that we have access to the form control, let’s use it to show or hide the validation border using the @HostBinding decorator.

We’ll display the validation border only after the user has interacted with the form control.

To do that, we will inspect the NgControl touched and dirty properties.

The checks for dirty and touched will prevent the border from showing until the user:

changes the value, turning the control dirty,

blurs the form control element, setting the control to touched.

One Time Configuration

Let’s finish up with providing a nice way to configure the directive. It’s important to keep the UI consistent, so it would be nice to set the directive configuration once, and have it applied in the entire app.

First, let’s create the config interface

Next we’ll implement the static forRoot method on the ValidationBorderModule class. It will provide the validation config under the VALIDATION_BORDER_CONFIG token.

Lastly, let’s consume the config inside the directive with the use of the @Inject decorator.