Angular反应形式输入字段的条件正则表达式

Question

image for regex我正在使用Angular反应形式并使用以下方法

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

在HTML中，我将ngIF条件用于form ['password']。无效，并写了密码要求标准。

但是现在我需要制定条件类型的条件。假设用户通过了三个正则表达式条件，则应该将绿色显示为已通过，而红色则显示为失败。

<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>

只能从前端侧实现吗？