Angular 11物料表单字段一行显示验证错误

Question

对于至少有一个no、char、special char和number的正则表达式赋值，我一直在与不显示的错误作斗争。

TypeScirpt

<mat-form-field class="form-element">
   <input matInput id="password1" placeholder="New password" formControlName="password1">            
   <label   *ngIf="resetPasswordForm.get('password1').errors && resetPasswordForm.get('password1').hasError('required') && 
        (resetPasswordForm.get('password1').dirty || resetPasswordForm.get('password1').touched)" >Errorasdf</label>
</mat-form-field>  

resetPasswordForm = this.formBuilder.group({
  password1: ['',[ Validators.required, Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=[^A-Z]*[A-Z])(?=.*[$@$!%*?&*()]).{8,16}$/) ]],
  password2: ['',[ Validators.required, Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=[^A-Z]*[A-Z])(?=.*[$@$!%*?&*()]).{8,16}$/) ]],
  
})

Answer 1

找到了一个有效的线条，看到了一些可怕的冗长的解决方案，这个效果很好。

      <mat-form-field class="form-element">
        <input matInput id="password1" placeholder="New password" formControlName="password1">
        <mat-error style="color: red;" *ngIf="resetPasswordForm.controls['password1']">Minumum 8 length with 1 upper, lower case letters, 1 symbol and 1 number</mat-error>
      </mat-form-field> 

Answer 2

HTML和Typescript之前的解决方案似乎只在第一次输入值时有效。如果发生错误，Validator事件将不会清除错误消息。这里是一个密码测试和工作代码，A-Z，a-z，0-9，特殊字符和长度为8个字符，这必须是任何顺序。

    regexp: RegExp = /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])/;

resetPasswordForm = this.formBuilder.group({
  password1: ['',[ Validators.minLength(8), Validators.pattern(this.regexp)]],
  password2: ['',[ Validators.minLength(8), Validators.pattern(this.regexp)]],
  
})

      <mat-form-field class="form-element">
        <input matInput id="password1" placeholder="New password" formControlName="password1">
        <mat-error style="color: red;" *ngIf="resetPasswordForm.controls['password1']">Minumum 8 length with 1 upper, lower case letters, 1 symbol and 1 number</mat-error>
      </mat-form-field>  

      
      <BR>
      <mat-form-field class="form-element">
        <input matInput id="password2" placeholder="Confirm password" formControlName="password2">
        <mat-error style="color: red;" *ngIf="resetPasswordForm.controls['password2']">Minumum 8 length with 1 upper, lower case letters, 1 symbol and 1 number</mat-error>
      </mat-form-field>