conditional Regex for Angular-reactive forms input field

Question

image for regexI am using Angular-reactive forms and using below method

password: [
                '',
                [
                    Validators.required,
                    Validators.pattern(this.passwordRegex),
                ],
paswordRegex = ^[a-zA-Z][a-zA-Z0-9]{8,20}$

in HTML I used ngIF condition for form['password'].invalid and wrote password requirement criteria.

But now I need to make conditional type of criteria. Suppose user passed three conditions of regex it should show green color to passed ones and red color to failed ones

<mat-error ........................ *ngIf="...">
     <ul>
                 <li> must contain at least one digit</li><!-- condition passed= color=green-->
                 <li> can't start with a digit, underscore or special characters</li><!-- condition passed= color=green-->
                 <li> length must be between 8 to 20 alphanumeric characters</li><!-- condition fail= color=red-->
                 <li> only !@#$% special characters are allowed</li><!-- condition fail= color=red-->
               </ul>
</mat-error>

Is it achievable from only front end side?