Reactive form validation - Angular & Bootstrap

Question

I am just trying to show a cross mark when the username is blank or is not with required pattern and show a tick if input entered is valid.Bootstrap is-active and is-inactive class help it. Below is the code i tried with. I only get username is undefined. I seem to have gone wrong with implementation. Could you please help rectify?

<form  [formGroup]="profileForm" (ngSubmit)="onSubmit()">

                <input
                  type="text"
                  placeholder="Username / Email"
                  class="form-control"
                  formControlName="username"
                  [ngClass]="username.errors?'is-invalid':'is-valid'"
                  name="username"
                  id="username"
                />
    </form>

In ts

 profileForm = new FormGroup({
    username: new FormControl('',[Validators.required,Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")])
  });

Akshay Rajput · Accepted Answer · 2019-05-07 06:51:35Z

1

in .ts add

get userName() {
 return this.profileForm.get('userName');
}

in html add

[ngClass]="userName.hasError('pattern')" ? "is-invalid": "is-valid"

if you wish not to add any code in .ts file use

[ngClass]="profileForm.controls['userName'].hasError('pattern')" ? "is-invalid": "is-valid"

answered May 7, 2019 at 6:51

Akshay Rajput

2,0781 gold badge15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JB Nizet · Accepted Answer · 2019-05-07 06:40:09Z

0

There is indeed no username property in your component. So yes, username is undefined.

The only property we know about is named profileForm. You can get its control named username using profileForm.get('username'), and you can test if this control is valid using profileForm.get('username').valid.

answered May 7, 2019 at 6:40

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Comments

glennsl · Accepted Answer · 2023-09-24 19:06:12Z

0

Add the following snippet to your style sheet:

.ng-touched.ng-invalid:not(form) {
  @extend .is-invalid;
}

.ng-touched.ng-valid:not(form) {
  @extend .is-valid;
}

edited Sep 24, 2023 at 19:06

glennsl

29.2k12 gold badges60 silver badges80 bronze badges

answered Sep 18, 2023 at 16:29

Natan Cipriano

11

Collectives™ on Stack Overflow

Reactive form validation - Angular & Bootstrap

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related