角密码强度扩展颜色不起作用

Question

我使用扩展@angular-material-extensions/password-strength，实际上只是从这里复制了演示示例，https://angular-material-extensions.github.io/password-strength/home

不知何故，颜色主成分永远不会出现。只有蓝色和红色出现。我还得加上一个

ngAfterViewChecked() {
    this.cdRef.detectChanges();
 }

使用颜色Expression has changed after it was checked...修复错误

颜色确实会变成粉红色，当它100%被选中时，只有蓝色，但我当然希望它是绿色的。

我的component.html：

    <tr>
      <td>
          <mat-card-subtitle>
              <mat-slide-toggle [(ngModel)]="showDetails" [ngModelOptions]="{standalone: true}">Show Password Requirements</mat-slide-toggle>
            </mat-card-subtitle>
        <mat-form-field appearance="outline" class="example-full-width" [color]="passwordComponent.color">
          <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
          <input matInput [type]="toggle.type" required placeholder="Password" #password formControlName="password"
            type="password" />
            <mat-hint align="end" aria-live="polite">
                {{password.value.length}} / 25
              </mat-hint>
          <mat-error *ngIf="formErrors.password" class="form__error">{{ formErrors.password }} </mat-error>
        </mat-form-field>
        <mat-password-strength #passwordComponent min="4" [password]="password.value">
      </mat-password-strength>

      <mat-password-strength-info
        *ngIf="showDetails"
        [passwordComponent]="passwordComponent">
      </mat-password-strength-info>
      </td>
    </tr>
    <tr>
    <tr>
      <td>
        <mat-form-field class="example-full-width">
          <input matInput required placeholder="Password Confirmation" compare="password"
            name="passwordConfirmation" formControlName="passwordConfirmation" type="password" />
          <mat-error *ngIf="formErrors.passwordConfirmation" class="form__error">
            {{ formErrors.passwordConfirmation }} </mat-error>
        </mat-form-field>
      </td>
    </tr>

编辑:我还发现如果我添加选项floatLabel="always"，floatLabel="always"会忽略它，因为auto函数本身不适合这个字段。

Answer 1

这与你所拥有的主题有关。

更准确地说，.mat-progress-bar-fill::after应该寻找什么:这样的东西应该适用于您：

mat-password-strength .mat-progress-bar-fill::after{
    background-color: #4caf50;
}

检查这里的实际示例：

https://stackblitz.com/edit/angular-material-password-stack-55569467?file=styles.css

Answer 2

我也遇到了同样的问题，这确实是我的主题(重音颜色为白色)的一个问题，我通过将css放在style.css中来解决这个问题。

   .mat-progress-bar.mat-warn .mat-progress-bar-buffer {
    background-color: #ffccbc;
}

.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {
    background-color: red !important; 
}

.mat-progress-bar.mat-accent .mat-progress-bar-buffer {
    background-color: lightgoldenrodyellow !important; 
}

.mat-progress-bar.mat-accent .mat-progress-bar-fill::after{
    background-color: yellow !important; 
}

.mat-progress-bar.mat-primary .mat-progress-bar-buffer {
    background-color: lightgreen !important; 
}

.mat-progress-bar.mat-primary .mat-progress-bar-fill::after{
    background-color: green !important; 
}

Answer 3

插件根据主题的..mat警告、..mat重音和原色调整颜色。即分别用于弱密码、中等密码和强密码。

若要覆盖不同阈值的主题颜色，请将以下内容添加到组件的样式中：

      mat-password-strength
        .mat-progress-bar.mat-warn
        .mat-progress-bar-fill::after {
        background-color: #f44336;
      }
      mat-password-strength
        .mat-progress-bar.mat-accent
        .mat-progress-bar-fill::after {
        background-color: #039be5;
      }
      mat-password-strength .mat-progress-bar-fill::after {
        background-color: #64dd17;
      }