web-dev-qa-db-ger.com

Angular Material - Zeigt den Mattenfehler beim Klicken der Schaltfläche an

Ich versuche die Validierung mit <mat-for-field> und <mat-error> durchzuführen. Dies funktioniert gut, wenn der Benutzer die Eingabe ohne Ausfüllen des Registers durchführt. Wie erzwinge ich diesen Fehler, wenn ich auf eine Schaltfläche klicke? Ich benutze nicht einreichen. Verwenden Sie auch vorlagengesteuerte Formulare.

Das ist mein 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]);

9
ganeshk

Informationen zum Verwenden eines Formulars mit einem benutzerdefinierten ErrorStateMatcher

Wenn Sie dieses Verhalten außer Kraft setzen möchten (z. B. um den Fehler anzuzeigen, sobald das ungültige Steuerelement fehlerhaft ist .__ oder wenn eine übergeordnete Formulargruppe ungültig ist.), Können Sie die errorStateMatcher-Eigenschaft von matInput ..__ verwenden. Die Eigenschaft nimmt eine Instanz eines ErrorStateMatcher-Objekts. Ein ErrorStateMatcher muss eine einzelne Methode implementieren, dh. übernimmt das FormControl für diesen matInput sowie das übergeordnete Formular und gibt einen booleschen Wert zurück, der angibt, ob Fehler angezeigt werden sollen. (true zeigt an, dass sie angezeigt werden sollen, und false, wenn sie sollten.)

Ich würde eine separate Datei wie default.error-matcher.ts erstellen

/** 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));
  }
}

Dann in der TS-Datei hinzufügen: 

matcher = new MyErrorStateMatcher();

Ändern Sie dann die Eingabe, um Matcher zu verwenden:

<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

Da Sie beim Klicken der Schaltfläche einen Matte-Fehler anzeigen möchten, versuchen Sie Folgendes: Für 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();

Es ist wichtig zu prüfen, wie Sie das Formularsteuerelement verwenden. ".MarkAsTouched ()" in Punkt 3 zeigt den Mattenfehler für das entsprechende Formularsteuerelement an.

6
Simran kaur

Basierend auf Kyle Pfromers Post fand ich meine Lösung (für dasselbe Problem):

In der TS-Datei habe ich den StateMatcher hinzugefügt, nachdem ich eine ungültige Form gefunden hatte, z.

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

In der MyErrorStateMatcher-Klasse habe ich Folgendes geändert:

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

Ich finde es verwirrend, dass Angular Material den Fehler sowieso nicht erkennt.

2
snibbo

Winkel 8 hat eine neue Formularmethode: markAllAsTouched();

Dies markiert ein Steuerelement/Formular und ALLE NACHKOMMEN als berührt !!!

Damit:

this.form.markAllAsTouched();

Ist die Lösung.

1
Spock

Das funktioniert für mich. :) Klicken Sie auf die Schaltfläche:

this.nameControl.markAsTouched();
1
Tejashree

Sie können die Funktion AbstractControl.updateValueAndValidity() auch einfach per Tastendruck aufrufen. Dadurch wird der Validierungsprozess auf dem entsprechenden ForControl erneut ausgeführt und, falls vorhanden, Fehler angezeigt (basierend auf Ihren Validatoren).

Also in deinem Beispiel:

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