angular - Angular-reactive 表单输入字段的条件正则表达式

Question

正则表达式的图像我正在使用 Angular 反应形式并使用以下方法

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

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

但现在我需要制定条件类型的标准。假设用户通过了正则表达式的三个条件，它应该向通过的条件显示绿色，对失败的条件显示红色

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

只能从前端实现吗？

标签： angularangular-reactive-forms