J'utilise l'extension La couleur primaire ne semble jamais. Juste le bleu et la couleur rouge apparaissent. J'ai également dû ajouter un P> pour corriger une erreur avec l'expression de couleur mon composant.html: P> @ angular-matériau-extensions / la force de mot de passe code> et simplement vient de copier l'exemple de la vitrine d'ici a changé après avoir été vérifié ... code> p> La couleur change à quelque chose comme le rose et quand il est vérifié à 100% seulement bleu, mais je veux que ce soit vert bien sûr. p> <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>
3 Réponses :
C'est quelque chose en rapport avec le thème que vous avez.
être plus précis Vérifiez l'exemple en direct ici: https://stackblitz.com/edit/angular-material-password-stack-55569467 ? File = styles.css .mat-progres-bar-remplissage :: Après Que faut-il rechercher:
Quelque chose comme ça devrait travailler pour vous:
Mauvais ça ne fonctionne pas pour moi. Mais c'est un bon indice avec le thème. Je ne me souviens pas d'avoir activé n'importe quel thème personnalisé. Où puis-je trouver ou vérifier, s'il y a un thème activé?
Vous devriez avoir quelque chose comme: @import '~@angulaire/material/prebuilt-themes/deeppurple-amber.css'; dans vos styles. (Dans mon exemple: styles.css ). Pouvez-vous faire un exemple de votre problème à Stackblitz?
Je l'ai trouvé mais c'est le thème standard @import "~@angular/material/prebuilt-themes/indigo-pink.css"; @Import URL ('https: //fontS.Joogleapis .com / icon? famille = matériau + icônes '); sans elle, ça ne ressemble à rien de ...
Ok j'ai compris ce que tu voulais dire. Je l'ai changé en @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; et maintenant la barre de progression a les couleurs rouge, jaune et à nouveau violet, pas verte même si le CSS. Étrange...
Si le vert n'apparaît pas que c'est parce que votre classe est déclarée avant que l'importation dans le CSS, vous devez le déplacer après ou la modifier à: Mat-Mot de passe-force-force .mat-progression-bar-remplissage :: après , allez mettre à jour la réponse
Ma faute était que je n'ai pas regardé à droite et que je pensais mettre les choses CSS dans la composante CSS non dans le global styles.css
Existe-t-il une possibilité de laisser également la trame du champ d'entrée apparaître dans cette couleur que j'ai sélectionnée dans le CSS? Parce que l'option est déjà intégrée et fonctionne avec les couleurs de thème mais pas avec les couleurs CSS ...
J'ai mis à jour l'exemple pour ajouter ceci. J'ajouterais une classe dans le champ (code> (Dans cet exemple, j'ai ajouté le champ Mat-Mot de passe ) pour leur dire qu'il s'agit d'un mot de passe et de Ensuite, ajoutez les classes dans le style comme: .mat-mot de passe-champ.mat-formulaire-focalisé.mat-Form-form-champ-label et .mat-mot de passe .mat-Form-Field.Mat-Formé-Form-Form-Field-Ripple avec la nouvelle couleur et la couleur d'arrière-plan. Vérifiez que cela fonctionne dans l'exemple.
J'ai eu le même problème, et c'était bien un problème avec mon thème (Couleur d'accent blanc) J'ai réussi à le réparer en mettant le CSS dans le 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;
}
Le plugin ajuste les couleurs basées sur la .mat-warn,. Match-accentuation et couleurs primaires de votre thème. C'est pour le mot de passe faible, moyen et fort, respectivement.
Pour écraser les couleurs de votre thème pour les différents seuils, ajoutez aux styles de votre composant les suivants: P>
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;
}