wake-up-neo.net

So zeigen Sie verschiedene Fehlermeldungen an, die auf Benutzereingaben in Angular 6

Ich bin neu für den Winkel 6. Hier möchte ich ein Benutzereingabefeld validieren und verschiedene Fehlernachrichten basierend auf der gegebenen Eingabe anzeigen.

In meinem Projekt verwende ich Angular Materialdesign für die Benutzeroberfläche.

Was ich tun möchte, ist 

  • Wenn der Benutzer auf die Schaltfläche "Speichern" klickt, wird eine Fehlermeldung mit "Bitte geben Sie Ihren FName" angezeigt.
  • Wenn der Benutzer berührt, aber nichts eingegeben hat und auf die Schaltfläche "Speichern" geklickt hat, wird eine Fehlermeldung als "Bitte geben Sie Ihren FName" angezeigt.
  • Wenn der Benutzer mit der Eingabe von char begonnen hat, sollte eine Fehlermeldung angezeigt werden als "Minimum 4 char required"
  • Sobald der Benutzer 15 Zeichen erreicht hat, sollte eine Fehlermeldung angezeigt werden: "Maximal 20 Zeichen"
  • Wenn der Benutzer ein Sonderzeichen und ein Leerzeichen eingibt, geben Sie eine Fehlermeldung als "Nur Alphabete eingeben" ein.

Jetzt ändert sich die Farbe in ROT, wenn die Eingabe die erfolgreiche Validierung nicht erfüllt. Ich möchte jedoch eine Fehlermeldung für jede Validierung in formControl anzeigen.

Hier habe ich ein Matteneingabefeld.

<form [formGroup]="userAddressValidations" novalidate>
    <mat-form-field appearance="outline" class="col-sm-6">
        <mat-label>First Name</mat-label>
        <input matInput formControlName="firstName">
    </mat-form-field>
</form>

<button mat-raised-button class="continueBtnHeight" color="warn">
<span>Save</span>
</button>

Ts-Datei

export class ButtonToggleOverviewExample {
  userAddressValidations: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.userAddressValidations = this.formBuilder.group({
      firstName: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20), Validators.pattern('[a-zA-Z]+')]]
    });

  }
}

stackblitz: https://stackblitz.com/edit/angular-t1k1x6-skowwq?file=app%2Fbutton-toggle-overview-example.ts

kann mir jemand helfen, das zu lösen.

angulartypescriptangular-materialangular6
4
Zhu

Versuche dies:

<form class="example-form" [formGroup]="userAddressValidations">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="First Name" formControlName="firstName">
    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('required')">
      First Name is Required!
    </mat-error>
    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('minlength')">
      First Name should be atleast 4 characters long!
    </mat-error>

    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('maxlength')">
      First Name can be atmax n characters long!
    </mat-error>

    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('pattern')">
      First Name must follow this pattern!
    </mat-error>
  </mat-form-field>

</form>

Hier ist ein Sample StackBlitz für Ihren Hinweis.

2
SiddAjmera

verwenden Sie hasError('invalidName'), wenn der Benutzer spezielle Zeichen und Leerzeichen eingibt

Stackblitz

Component.html

<form [formGroup]="userAddressValidations">

    <label>User Name : 
        <input type="text"  formControlName="firstName">
    </label><br>

    <div class="errors" *ngIf="userAddressValidations.get('firstName').invalid && (userAddressValidations.get('firstName').touched || userAddressValidations.get('firstName').dirty)">

        <div *ngIf="userAddressValidations.get('firstName').hasError('required')">
            Please enter your FName
        </div>

        <div *ngIf="userAddressValidations.get('firstName').errors.minlength">
            minimum 4 char required
        </div>

        <div *ngIf="userAddressValidations.get('firstName').errors.maxlength">
            Maximum 20 char only
        </div>

        <div class="error-text" *ngIf="userAddressValidations.get('firstName').hasError('invalidName')">
            Enter only alphabets
        </div>
    </div>

</form>

Component.ts

this.userAddressValidations = fb.group({
      firstName: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20), usernameValidator]]
});

benutzername.validators.ts

import { AbstractControl, ValidationErrors } from "@angular/forms"

export const usernameValidator = function (control: AbstractControl): ValidationErrors | null {

  let value: string = control.value || '';

  if (value) {
    const matches = value.match(/^[a-zA-Z]+$/);
    return matches ? null : { 'invalidName': true };
  } else {
    return null;
  }
}
1
Krishna Rathore

Sehen Sie sich dieses Tutorial an https://codecraft.tv/courses/angular/forms/model-driven-validation , Sie können auch auf diese stackoverflow-Frage verweisen: Benutzerdefinierter Validatorfehler mit mat-error anzeigen

Aber hier ist ein kleines Beispiel:

<form [formGroup]="userAddressValidations" novalidate>
    <mat-form-field appearance="outline" class="col-sm-6">
        <mat-label>First Name</mat-label>
        <input matInput formControlName="firstName">
         <mat-error *ngIf="email.errors.required">{{getErrorMessage()}}</mat-error>
         <mat-error *ngIf="email.errors.minlength">{{getErrorMessage()}}</mat-error>
    </mat-form-field>
</form>
0
Patricio Vargas