CODEWITHSUNDEEP
javascriptangulartypescriptangular-reactive-forms
stack over
stack over

Reputation: 65

Reactive Form Validation errors not displaying in Angular 5

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

Upvotes: 1

Views: 3083

Answers (2)

Kamran Khatti
Kamran Khatti

Reputation: 4137

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

Upvotes: 2

Mateusz Ścigała
Mateusz Ścigała

Reputation: 196

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.

Upvotes: 1

Related Questions