Soy principiante en angular y comencé a trabajar en el proyecto angular 12. Estoy trabajando en formularios reactivos en los que estoy agregando el método Blur para agregar clase a mi campo de entrada en algunas condiciones de error para dar estilo a los campos de entrada.

Puedo hacerlo, pero ahora tengo entre 12 y 15 componentes con formularios. Quiero utilizar la misma funcionalidad en todos los componentes. ¿Hay alguna manera de que pueda hacer esto sin repetir el código en el archivo ts para el método onblur? A continuación se muestra mi código.

 <form [formGroup]="changePasswordForm" (ngSubmit)="submitForm()"> <div class="form-group" [ngClass]="f.oldPassword.invalid && ((f.oldPassword.dirty || f.oldPassword.touched))?'has-error':''"> <label>Old Password<span class="error-red">*</span></label> <input type="password" class="form-control input-type2" formControlName="oldPassword" (blur)="onBlur($event)"> <div class="error error-msg"> <div *ngIf="f.oldPassword.errors?.required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Old password is required. </div> </div> </div> </form>

componente.ts

 onBlur(e: any) { if (e.target.className && e.target.className.indexOf('ng-invalid') > 0) { e.target.className = e.target.className.replace('has-success', ''); } else { e.target.className = e.target.className + ' has-success'; } }

Estoy escribiendo la misma pieza de código en todos los componentes del formulario para hacer mi trabajo. Sé que una forma de lidiar con lo anterior es crear un servicio y escribirlo allí. Pero investigué un poco y descubrí que podemos crear directivas para tales cosas. Pero no estoy seguro de cómo hacerlo. Cualquier ayuda será apreciada. Gracias.