Vyhledávání na webu

typescript - Jak zobrazit různé chybové zprávy na základě uživatelského vstupu v Angular 6

Jsem nový v Angular 6. Zde chci ověřit uživatelské vstupní pole a zobrazit různé chybové zprávy na základě zadaného vstupu.

Ve svém projektu používám Angular Material design pro uživatelské rozhraní.

Co chci udělat, je

  • Pokud uživatel klikne na tlačítko uložit, zobrazí se chybová zpráva "Prosím, zadejte své jméno".
  • Pokud uživatel klikne, ale nic nezadá, a klikne na tlačítko uložit, zobrazí se chybová zpráva jako "Prosím zadejte své křestní jméno".
  • Pokud uživatel začne zadávat znak, mělo by se zobrazit chybové hlášení "vyžadováno minimálně 4 znaky"
  • Jakmile uživatel dosáhne 15 znaků, měla by se zobrazit chybová zpráva "Maximálně pouze 20 znaků"
  • Pokud uživatel zadá jakýkoli speciální znak, mezeru nebo jiný vstup, zobrazí se chybová zpráva "Zadejte pouze písmena"

Nyní se mění na červenou barvu, když vstup nesplňuje úspěšnou validaci. Ale já chci zobrazit chybovou zprávu pro každou validaci ve formControl.

Tady mám pole pro zadávání mat.

<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>

Soubor TS

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

Může mi někdo pomoci to vyřešit.

Odpověď č. 1

Zkuste toto:

<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>

Tady je ukázkový StackBlitz pro vaši referenci.

Odpověď č. 2

použijte hasError('invalidName') pokud uživatel zadá jakýkoli speciální znak a mezeru

Stackblitz

Komponenta.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>

Komponenta.ts

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

username.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;
  }
}

Související články