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>

编辑：我还发现，如果添加选项<mat-form-field>，floatLabel="always"会忽略它，因为自动功能在该字段中本身不起作用。

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-warn、.mat-accent 和原色调整颜色。分别是弱、中、强密码。

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

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

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

3 个答案: