p-password not getting focused on a button click

Describe the bug

I'm using p-password component in my Angular application where I want to focus it on a button click if entered password is invalid. I followed this below approach but didn't get the expected result:

 <p-password
      #newPasswordInput
      formControlName="newPassword"
      minLength="12"
      maxLength="20"
      [toggleMask]="true"
      placeholder="Enter new password"
      promptLabel="Choose a password"
      weakLabel="Too Simple"
      mediumLabel="Moderate"
      strongLabel="Strong"
      [mediumRegex]="MEDIUM_PASSWORD_REGEX"
      [strongRegex]="STRONG_PASSWORD_REGEX">
      <ng-template pTemplate="footer">
        <p-divider></p-divider>
        <p class="mt-2">Suggestions</p>
        <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
          <li>Minimum 12 characters</li>
          <li>At least one lowercase</li>
          <li>At least one uppercase</li>
          <li>At least one numeric</li>
          <li>At least one special character $#^@$!%*,?&+-.</li>
        </ul>
      </ng-template>
 </p-password>

I keep a reference variable #newPasswordInput to p-password and accessing this using ViewChild() in .ts file as shown below:

if (!this.changePasswordForm.controls['newPassword'].valid) {
    this.newPasswordInput.nativeElement.focus();
    return this.toastrService.error(toasterMessage.invalidNewPassword, 'Error');
}

When I click submit button and if this condition is true, getting an error saying Cannot read properties of undefined (reading 'focus')

How can I achieve this or missing something? Please advice!

Environment

Using Angular

Reproducer

No response

Angular version

16.2

PrimeNG version

16.9.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

primefaces / primeng