Reactive Form Validation errors not displaying in Angular 5

Question

I'm working on Angular 5 applications, I wanted to display the follow error message based on user inputs

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

But the issue is only, emptyUserName works others doesn't work and no errors in console also.

Below is my component code

    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])
    });

Below is my Template code,

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

What I'm doing wrong here ? Please guide me

Kamran Khatti · Accepted Answer · 2020-09-05 11:03:13Z

You have few glitches in your code first I would say replace .touched to .dirty to show form errors on the fly in template.

For max, min length error messages angular form doesnt have camelCase pattern, its simple all lowercase so use minlength and maxlength instead.

The complete template would look like.

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

Working DEMO

Mateusz Ścigała · Accepted Answer · 2020-09-04 22:02:38Z

1

Change minLength to minlength and maxLength to maxlength in ngIf. For pattern error use customize validator or just use error.invalid value with message e. g: Form value has invalid format.

answered Sep 4, 2020 at 22:02

Mateusz Ścigała

1961 gold badge1 silver badge5 bronze badges

Collectives™ on Stack Overflow

Reactive Form Validation errors not displaying in Angular 5

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related