Input properties in angular directives - html

Question

I'm having a problem with input properties in angular directive used in my reactive form (Side question here: Is it a good practice to use directives in reactive forms?). I want to create universal directive for cross field validation that would take as an input two strings each for the name of a field to validate. Here's some code to illustrate what I mean.
// Directive
import { Directive, Input, OnInit } from '#angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '#angular/forms';
#Directive({
selector: '[appConfirmEqualValidator]',
providers: [
{
provide: NG_VALIDATORS,
useClass: ConfirmEqualValidatorDirective,
multi: true,
}
],
})
export class ConfirmEqualValidatorDirective implements OnInit, Validator {
#Input() confEqSecControlName: string // = 'password' ; would work if uncommented
#Input() confEqFirstControlName: string // = 'confirmPassword' ;
constructor() {
}
ngOnInit(): void {
}
validate(controlGroup: AbstractControl): { [key: string]: any; } {
console.log(this.confEqFirstControlName + ' ' + this.confEqSecControlName);
let firstControl = controlGroup.get(this.confEqFirstControlName);
let secControl = controlGroup.get(this.confEqSecControlName);
console.log(firstControl.value + ' fc ' + secControl.value + ' sec');
if (firstControl && secControl && ( firstControl.value !== secControl.value )) {
return { 'notEqual': true};
} else {
return null;
}
}
registerOnValidatorChange?(fn: () => void): void {
throw new Error("Method not implemented.");
}
}
// HTML
<!-- Password Group -->
<div formGroupName="passwordGroup" appConfirmEqualValidator [confEqFirstControlName]="'password'" [confEqSecControlName]="'confirmPassword'">
<!-- Password -->
<div class="form-group">
<label class="control-label" for="passwordId">Password</label>
<div>
<input class="form-control" formControlName="password" type="text" id="passwordId" placeholder="Password (required)" />
<div class="text-danger" *ngIf="signUpForm.get('passwordGroup.password').errors">Danger</div>
</div>
</div>
<!-- Confirm Password -->
<div class="form-group">
<label class="control-label" for="confirmPasswordId">Confirm Password</label>
<div>
<input class="form-control" formControlName="confirmPassword" type="text" id="confirmPasswordId" placeholder="Confirm Password (required)"/>
</div>
</div>
<div class="text-danger" *ngIf="signUpForm.get('passwordGroup').errors?.notEqual">Not Equal</div>
</div>
pastebin for clarity
I'm new to angular but from what I've read in the docs this should work just fine. Well It isn't. The values are not being bound to properties at all, and the console logs 'undefined'. Everything works just fine when I specify default values, but well then with hard-coded values I'd have to make one directive/function for each set of fields. I'd be very grateful for some help, thanks.