web-dev-qa-db-fra.com

Matériau angulaire - afficher une erreur sur un clic du bouton

J'essaye de faire la validation en utilisant les <mat-for-field> et <mat-error>. Cela fonctionne bien lorsque l'utilisateur quitte l'entrée sans la remplir. Mais comment forcer cette erreur à apparaître lorsque je clique sur un bouton? Je n'utilise pas soumettre. Utilisez également des formulaires basés sur des modèles.

Ceci est mon code:

HTML:

<mat-form-field>
    <input matInput placeholder="Due Date" name="dueDate" [(ngModel)]="dueDate" [formControl]="dueDateValidator" required>
    <mat-error *ngIf="dueDateValidator.invalid">Due Date is required for Tasks</mat-error>
</mat-form-field>

TS:

dueDateValidator: FormControl = new FormControl('', [Validators.required]);

angulartypescriptangular-material
9
ganeshk

Voir comment utiliser un formulaire avec un ErrorStateMatcher personnalisé

Si vous souhaitez remplacer ce comportement (par exemple, pour afficher l'erreur dès que Le contrôle non valide est sale ou lorsqu'un groupe de formulaires parent est Invalide), vous pouvez utiliser la propriété errorStateMatcher de matInput . La propriété prend une instance d'un objet ErrorStateMatcher. Un ErrorStateMatcher doit implémenter une seule méthode isErrorState qui prend le FormControl pour ce matInput ainsi que le formulaire parent et renvoie un booléen indiquant si des erreurs doivent être affichées. (true indiquant qu'ils devraient être affichés et false indiquant qu'ils ne devraient pas.)

Je voudrais faire un fichier séparé tel que default.error-matcher.ts

/** Error when invalid control is dirty or touched*/
export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return !!(control && control.invalid && (control.dirty || control.touched));
  }
}

Ensuite, dans le fichier TS, ajoutez: 

matcher = new MyErrorStateMatcher();

Puis changez l'entrée pour utiliser matcher:

<mat-form-field>
    <input matInput placeholder="Due Date" name="dueDate" [(ngModel)]="dueDate" [formControl]="dueDateValidator" [errorStateMatcher]="matcher" required>
    <mat-error *ngIf="dueDateValidator.invalid">Due Date is required for Tasks</mat-error>
</mat-form-field>
13
Kyle Pfromer

Puisque vous voulez afficher une erreur de mat lors du clic du bouton, essayez ce qui suit: Pour la version Angular6:

1). import below:
    import { FormControl, FormBuilder, FormGroup } from '@angular/forms';

2). declare form control in .ts file:
    nameControl = new FormControl('');

3). put control in html:
    <mat-form-field  style="width: 100%" floatPlaceholder="never">
      <input matInput placeholder="your placeholder text" [formControl]="nameControl" 
        required/>
      <mat-error *ngIf="nameControl.errors?.required">name is required</mat-error>
    </mat-form-field>

3). on button's click:
    this.nameControl.markAsTouched();

Il est important de vérifier comment vous utilisez le contrôle de formulaire. ".MarkAsTouched ()" au point 3 indiquera l'erreur de matrice pour le contrôle de formulaire correspondant.

6
Simran kaur

Basé sur le post de Kyle Pfromer, j'ai trouvé ma solution (au même problème):

Dans le fichier TS, j'ai ajouté StateMatcher après avoir trouvé un formulaire non valide, par exemple.

if (this.myFormGroup.invalid) {
  this.matcher = new MyErrorStateMatcher();
  return;
}

Dans la classe MyErrorStateMatcher, j'ai changé comme suit:

    return !!(control && control.invalid);

Je trouve cela déroutant que Matériel angulaire ne détecte pas l’erreur de toute façon.

2
snibbo

Cela fonctionne pour moi. :) Cliquez sur le bouton:

this.nameControl.markAsTouched();
1
Tejashree

Vous pouvez également appeler facilement la fonction AbstractControl.updateValueAndValidity() lors d’un clic sur un bouton. Cela exécutera à nouveau le processus de validation sur le ForControl correspondant et affichera les erreurs éventuelles (en fonction de vos validateurs).

Donc, dans votre exemple:

    checkForErrorsOnButtonClick(): void {
      dueDateValidator.updateValueAndValidity();
    }
0
SplinterStan