Angular custom directive not working on input pattern

Question

I'm trying to set a regex pattern with a custom Angular directive:

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appPasswordRegex]',
})
export class PasswordRegexDirective {
  constructor(private el: ElementRef) {
    this.el.nativeElement.pattern = '^(?=.*?[a-zA-Z])(?=.*?[0-9]).*$';
  }
}

HTML:

<input
      appPasswordRegex
      type="password"
      ngModel
      name="password"
      required
      minlength="7"
    />

I also check this.el in console and pattern property is changed successfully, but it isn't applied in action. Contrary to this, if I just write the pattern inside an input like this below, it works perfectly, even though pattern property is being changed in both cases:

<input
      type="password"
      ngModel
      name="password"
      required
      pattern="^(?=.*?[a-zA-Z])(?=.*?[0-9]).*$"
      minlength="7"
    />

what could be the issue?