Angular 6 - Validators pattern not working

Question

I am using a reactive form in angular 6, and trying to do some validation on a password field. Basically it needs to be more than 8 characters, contain at least 1 upper case, and contain at least 1 symbol.

my regex which I have tested, is ^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,})

Here is an excerpt from my login component ts:

  ngOnInit() {
        this.loginForm = this.formBuilder.group({
            userName: ['Username', [Validators.required]],
            password: ['Password', [Validators.pattern("^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,})")]]            
        });
    }

Here is my form group div:

 <div class="form-group">
                      <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                      <div *ngIf="submitted && f.password.errors" class="invalid-feedback">              
                          <div *ngIf="f.password.errors.pattern">Password must contain more than 8 characters, 1 upper case letter, and 1 special character</div>
                      </div>
                  </div>

Basically the password does not validate even if it appears to be correct. Any tips would be appreciated.

can you give a "valid" password ?

xrobert35
– xrobert35

2018-09-28 20:01:32 +00:00
Commented Sep 28, 2018 at 20:01 — xrobert35
– xrobert35, Commented Sep 28, 2018 at 20:01
for example, Superman***** should work

sm1l3y
– sm1l3y

2018-09-28 20:04:18 +00:00
Commented Sep 28, 2018 at 20:04 — sm1l3y
– sm1l3y, Commented Sep 28, 2018 at 20:04

xrobert35 · Accepted Answer · 2018-09-28 20:13:09Z

23

ng-pattern seem to take a regExp as parameter (like in angularJs) :

Validators.pattern(new RegExp("^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,}))")

You can also use /..../

Validators.pattern(/^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,})/)

Should work ;)

answered Sep 28, 2018 at 20:13

xrobert35

2,5761 gold badge19 silver badges16 bronze badges

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

4 Comments

sm1l3y Over a year ago

than you so much!

gregor vojvoda Over a year ago

The second option wok as a charm

sda87 Over a year ago

thanks have tried second option and it's working perfectly.

DJ22T Over a year ago

You are a freaking genius!

T.Liu · Accepted Answer · 2018-09-28 20:14:26Z

1

I think it's due to the *ngIf condition in your HTML.]

Try *ngIf="loginForm.controls.password.hasError('pattern')"

answered Sep 28, 2018 at 20:14

T.Liu

5121 gold badge5 silver badges17 bronze badges

Comments

Trilok Singh · Accepted Answer · 2020-02-15 16:00:00Z

1

 pattern1 =  "^[0-9_-]{10,12}$";
 phone: ['', [Validators.required, Validators.pattern(this.pattern1)]]

answered Feb 15, 2020 at 16:00

Trilok Singh

1,37114 silver badges11 bronze badges

Comments

mohamed · Accepted Answer · 2018-09-29 03:08:05Z

You need to use the /.../ in the pattern and to add the required validator this is a link for working example https://stackblitz.com/edit/angular-rkxs3q

<h1 class="title">validation</h1>

<hr/>

<form class="user-form" [formGroup]="userForm" (submit)="onSubmit()">

<div class="form-group">
    <label for="type">User type:</label>
    <select id="type" formControlName="type">
  <option disabled value="null">please select user type</option>
  <option *ngFor="let userType of userTypes">{{userType}}</option>
</select>
</div>

<div class="form-group">
    <label for="name">User Name:</label>
    <input type="text" id="name" formControlName="name" />
</div>



<div class="form-group">
    <label for="address">User  address:</label>
    <input type="text" id="address" formControlName="address" />
</div>

<div class="form-group">
    <label for="password">password:</label>
    <input type="text" id="password" formControlName="password" />
</div>
 <div class="error"
 *ngIf="!userForm.get('password').valid && userForm.get('password').touched">
Password must contain more than 8 characters, 1 upper case letter, and 1 
special 
character
</div>

 <button type="submit">submit</button>
   </form>
   <hr/>

the Typescript

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ValidatorFn, FormControl, 
 ValidationErrors } from '@angular/forms';
 import { Subscription } from 'rxjs';
import { Observable } from 'rxjs';



 @Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
  })
 export class AppComponent implements OnInit {
 userForm: FormGroup;
  userTypes: string[];

 private userTypeSubscription: Subscription;

 constructor(private fb: FormBuilder) { }

  ngOnInit() {
this.userTypes =["Custumer","Admin","Super Admin"]
 this.userForm = this.fb.group({
  type: [null, [Validators.required]],
  name: [null, [
    Validators.required,
    Validators.pattern(/^[A-z0-9]*$/),
    Validators.minLength(3)]
  ],
  address: null,
  password: [null, [
    Validators.required,Validators.pattern(/^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=. 
     {9,})/)]
  ]
});
  }
 }

Guido Amabili · Accepted Answer · 2020-12-04 10:36:08Z

0

Check the type attribute of your input if you want to validate numeric values. If it's a number type input, then some browser will not pass any non-numeric value to the validator, thus you will have a required error in your map, if you declared a Validators.required in the validator array.

answered Dec 4, 2020 at 10:36

Guido Amabili

638 bronze badges

Collectives™ on Stack Overflow

Angular 6 - Validators pattern not working

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related