Je veux afficher l'erreur mat juste après que l'utilisateur a commencé à écrire quelque chose sur un élément d'entrée. Voici mon code:
<mat-error *ngIf="password.dirty">
<mat-error *ngIf="password.errors?.pattern">
Password must be 8 characters long, one numeric, one special character....
</mat-error>
</mat-error>
Je veux afficher le message d'erreur une fois que l'utilisateur a commencé à taper l'entrée. Actuellement, l'erreur apparaît sur la zone de texte perdue le focus. J'ai également essayé de la manière suivante:
<mat-form-field appearance="outline">
<mat-label>Password</mat-label>
<input matInput type="password" placeholder="Password" required [(ngModel)]='model.password' #password='ngModel' name='Password' [minlength]='requiredLength' [pattern]="passwordPattern">
<mat-error *ngIf="password.errors?.pattern">
Password must be 8 characters long, one numeric, one special character....
</mat-error>
</mat-form-field>
Mais cela produit également le même comportement qu'avant. Une solution possible consisterait probablement à utiliser mat-hint. Mais je ne veux pas le montrer comme un indice selon l'exigence, je dois le montrer comme une erreur.
Au fait, j'utilise ng-form.
Est-ce possible d'obtenir le comportement spécifié en utilisant mat-error sur ng-form? ou je dois personnaliser le css pour mat-hint pour qu'il ressemble au message d'erreur?
3 Réponses :
Si vous souhaitez déclencher la validation à chaque frappe effectuée par l'utilisateur, vous devez utiliser une petite solution de contournement. Je vous suggère d'utiliser un FormControl , qui vous permettra ensuite de définir un validateur directement sur ce contrôle et aussi d'écouter les changements émis par valueChanges pour marquer le FormControl comme touché pour déclencher la validation (peut-être y a-t-il une meilleure solution à cela?).
Merci pour la suggestion. l'a voté car c'est définitivement un moyen de contourner. Mais en fait, il s'agit d'une petite partie d'un formulaire plus grand où je devais montrer le comportement attendu avec un changement minimal sur toute la page. Le formulaire est déjà développé sur ng-form, le convertir en FormControl entraînerait un changement dans chaque entrée de la page. Je cherchais une solution sans utiliser FormControl, s'il y en a!
vous pouvez le faire de cette manière -
onChange($event, password){
this.model.password = $event;
if(!password.control.touched){
password.control.markAsTouched();
}
}
et dans votre méthode component.ts add onChange () -
<mat-form-field appearance="outline">
<mat-label>Password</mat-label>
<input matInput
type="password"
placeholder="Password"
name='Password'
[ngModel]='model.password'
(ngModelChange)="onChange($event, password)"
#password='ngModel'
[minlength]='requiredLength'
[pattern]="passwordPattern"
required>
<mat-error *ngIf="password.errors?.pattern"">
Password must be 8 characters long, one numeric, one special character....
</mat-error>
</mat-form-field>
oui, cela sert le but. Mais je ne comprends pas pourquoi je devrais envoyer le paramètre d'événement et le lier à partir du fichier component.ts? car il est déjà lié à l'aide de ngModel. y a-t-il une raison de faire cela?
Cela appliquera le nouveau matcher à l'ensemble de votre application:
dirty-error-state.matcher.ts
import { DirtyErrorStateMatcher } from 'your-path-here';
import { ErrorStateMatcher } from '@angular/material/core';
@NgModule({
...
providers: [{
provide: ErrorStateMatcher,
useClass: DirtyErrorStateMatcher
}]
})
app.module.ts
import {FormControl, FormGroupDirective, NgForm } from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';
export class DirtyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
return !!(control && control.invalid && (control.dirty || control.touched));
}
}
Mise à jour le 1/2/2021 par Reza Taba : p>
Ajout de control.touched donc si l'utilisateur laisse le fichier sans valeur, l'erreur obligatoire se déclenche.
Propre et super utile !!! Vous pouvez également le fournir à un seul composant si vous ne souhaitez pas que le correcteur d'état d'erreur s'applique à l'ensemble de l'application. @Component ({// ... fournisseurs: [{provide: ErrorStateMatcher, useClass: DirtyErrorStateMatcher}]
Pouvez-vous poster le code du composant?
@ FabianKüng J'ai utilisé ng-form et dans mon fichier de composant, je viens d'initialiser le modèle et d'autres variables.