Angulaire du Matériel - afficher mat-erreur sur le bouton cliquez sur

Je suis en train de faire de la validation à l'aide de la <mat-for-field> et <mat-error>. Cela fonctionne bien lorsque l'utilisateur onglets de l'entrée sans remplissage. Mais comment puis-je la force de cette erreur quand je clique sur un bouton? Je ne suis pas à l'aide de soumettre. Aussi, en utilisant le modèle axé sur les formes.

C'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]);

Regarde dans erreur personnalisé de rapprochement

OriginalL'auteur ganeshk | 2017-10-14

17

Voir comment utiliser un formulaire avec une coutume ErrorStateMatcher

Si vous souhaitez remplacer ce comportement (par exemple, pour montrer l'erreur dès
comme le contrôle non valide est sale ou lorsque l'un des parents du groupe est
non valide), vous pouvez utiliser le errorStateMatcher propriété de la matInput.
La propriété a une instance d'un ErrorStateMatcher objet. Un
ErrorStateMatcher doit mettre en œuvre une méthode unique qui isErrorState
prend le FormControl pour cette matInput ainsi que le formulaire parent et
renvoie un booléen qui indique si les erreurs devraient être présentées. (vrai
en indiquant qu'elles doivent être démontré, et false indiquant qu'ils
ne devrait pas.)

Je voudrais faire un fichier séparé comme par défaut.erreur de correspondance.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));
  }
}
```
Puis dans le fichier TS d'ajouter:
```
matcher = new MyErrorStateMatcher();
```
Puis modifiez l'entrée à 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>
```
Merci. Je vais essayer cela.
Cela a fonctionné parfaitement pour moi.
Avancé: si vous êtes à la création de vos propres contrôles de formulaire le [errorStateMatcher] fait partie de la CanUpdateErrorState interface

OriginalL'auteur Kyle Pfromer

Puisque vous voulez montrer mat erreur sur le click du bouton, s'il vous plaît essayer la ci-dessous:
Pour Angular6 version:

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 la façon dont vous utilisez le formulaire de contrôle ".markAsTouched()" sur le point 3 affiche le tapis d'erreur pour le formulaire de contrôle.

Le markAsTouched est ce que je cherchais

OriginalL'auteur Simran kaur

2

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

Dans le fichier TS, j'ai ajouté la StateMatcher après j'ai trouvé un formulaire non valide, par exemple.
```
if (this.myFormGroup.invalid) {
  this.matcher = new MyErrorStateMatcher();
  return;
}
```
Dans le MyErrorStateMatcher classe j'ai changé comme suit:
```
    return !!(control && control.invalid);
```
Je trouve cela déroutant qui Angulaire Matériel n'est pas à la détection de l'erreur de toute façon.

OriginalL'auteur snibbo
1

Cela fonctionne pour moi. 🙂 Sur le click du bouton:
```
this.nameControl.markAsTouched();
```
c'est génial ..

OriginalL'auteur Tejashree
0

Vous pouvez facilement appeler le AbstractControl.updateValueAndValidity() la fonction de clic sur le bouton. Cela va lancer le processus de validation sur le ForControl encore et afficher les erreurs, s'il y en a (en fonction de votre Validateurs).

Donc, dans votre exemple:
```
    checkForErrorsOnButtonClick(): void {
      dueDateValidator.updateValueAndValidity();
    }
```
Ce serait bien mais de toute façon ne fonctionne pas pour moi.

OriginalL'auteur SplinterStan

Vous devez vous connecter pour publier un commentaire.

Voir comment utiliser un formulaire avec une coutume ErrorStateMatcher