Errori di convalida del modulo reattivo non visualizzati in Angular 5

Question

Sto lavorando su applicazioni Angular 5, volevo visualizzare il messaggio di errore di follow in base agli input dell'utente

emptyUserName = 'You must enter a username';
minlengthUserName = 'User name must be at least 3 characters long';
maxlengthUserName = 'Username cannot exceed 20 characters';
userNamePattern = 'Username should be in alphanumeric only';

Ma il problema è solo, emptyUserNamefunziona altri non funziona e nessun errore anche nella console.

Di seguito è riportato il codice del mio componente

    this.loginForm = new FormGroup({
        userName: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(20), Validators.pattern(/^[a-zA-Z0-9]+$/)]),
        password: new FormControl('', [Validators.required])
    });

Di seguito è riportato il codice del mio modello,

 <form class="ro-form" [formGroup]="loginForm" (ngSubmit)="doLogin()" novalidate>
        <div class="form-group">
          <label class="labelHead" for="username">
            <b>Username</b>
          </label>
          <input type="text" id="username" formControlName="userName" placeholder="username">

          <div *ngIf="loginForm.controls.userName.touched && loginForm.controls.userName.errors?.required" class="form-error-messages"
            id="error-no-username">
            {{emptyUserName}}
          </div>
          <div *ngIf="loginForm.controls.userName.touched && loginForm.controls.userName.errors?.minLength" class="form-error-messages"
            id="error-minlength-username">
            {{minlengthUserName}}
          </div>
          <div *ngIf="loginForm.controls.userName.touched && loginForm.controls.userName.errors?.maxLength" class="form-error-messages"
            id="error-maxlength-username">
            {{maxlengthUserName}}
          </div>
          <div *ngIf="loginForm.controls.userName.touched && loginForm.controls.userName.errors?.pattern" class="form-error-messages"
            id="error-pattern-username">
            {{userNamePattern}}
          </div>
        </div>

Cosa sto facendo di sbagliato qui? Per favore guidami

Answer 1

Hai alcuni difetti nel codice prima direi sostituire .touchedper .dirtymostrare errori di forma al volo in modello.

Per i messaggi di errore di lunghezza massima e minima, la forma angolare non ha il modello camelCase, è semplice tutto minuscolo, quindi usa minlengthe maxlengthinvece.

Il modello completo sarebbe simile.

<form class="ro-form" [formGroup]="loginForm" (ngSubmit)="doLogin()" novalidate>
    <div class="form-group">
      <label class="labelHead" for="username">
        <b>Username</b>
      </label>
      <input type="text" id="username" formControlName="userName" placeholder="username">

      <div *ngIf="loginForm.controls.userName.dirty && loginForm.controls.userName.errors?.required" class="form-error-messages"
        id="error-no-username">
        {{emptyUserName}}
      </div>
      <div *ngIf="loginForm.controls.userName.dirty && loginForm.controls.userName.errors?.minlength" class="form-error-messages"
        id="error-minlength-username">
        {{minlengthUserName}}
      </div>
      <div *ngIf="loginForm.controls.userName.dirty && loginForm.controls.userName.errors?.maxlength" class="form-error-messages"
        id="error-maxlength-username">
        {{maxlengthUserName}}
      </div>
      <div *ngIf="loginForm.controls.userName.dirty && loginForm.controls.userName.errors?.pattern" class="form-error-messages"
        id="error-pattern-username">
        {{userNamePattern}}
      </div>

      {{loginForm.controls.userName.errors | json}} <!-- see errors while typing the input -->
    </div>

DEMO funzionante

Answer 2

Modificare minLength in minlength e maxLength in maxlength in ngIf. Per gli errori del modello, usa il validatore personalizzato o usa semplicemente il valore error.invalid con il messaggio e. g: il valore del modulo ha un formato non valido.