Angular, SCSS

I am struggling with the very last password validation. Here's my TS for the password validator:

password: this.formBuilder.control('',
    Validators.compose([
      Validators.required,
      Validators.minLength(8),
      Validators.maxLength(20),
    ])
)

I have 2 *ngIf statements: one to display if the password is left blank, and another to display if the password isn't within the range of the minLength and maxLength. I can only get the blank password *ngIf to work, while the minLength/maxLength won't work 😵‍💫 I cannot get the minLength or maxLength Angular validators to catch the password input, and display the accompanying message. Any thoughts on what I'm missing? Do I need an additional conditional beside having errors in minLength/maxLength & the input being touched/dirty?

<label for="password" name="password">
    <input required name="password" type="password" placeholder="Password" id="password" formControlName="password">
    <div class="error" *ngIf="signUpForm.get('password')!.touched && signUpForm.get('password')!.pristine">
        <img src="../../assets/icon-error.svg" alt="Error!"> 
        <span>Password cannot be empty</span>
    </div> 
    <div class="error" *ngIf="(signUpForm.get('password')!.hasError('minLength') || signUpForm.get('password')!.hasError('maxLength')) && (signUpForm.get('password')!.dirty || signUpForm.get('password')!.touched)">
        <img src="../../assets/icon-error.svg" alt="Error!"> 
        <span>Password must be between 8 and 20 characters.</span>
    </div> 
</label>