Skip to content

Instantly share code, notes, and snippets.

@guillefd
Last active December 8, 2022 12:32
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save guillefd/3ee6c6899d21661f218c3c7ed9586e68 to your computer and use it in GitHub Desktop.
Save guillefd/3ee6c6899d21661f218c3c7ed9586e68 to your computer and use it in GitHub Desktop.
Angular Form Validator: Password Strength with upper, lower and number
<form [formGroup]="form">
<input type="password"
formControlName="password">
<p class="help is-danger"
*ngIf="form.get('password').hasError('strong')">
Must have at least one number, one lowercase and one uppercase letter.</p>
</form>
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { PasswordValidator } from 'password.validator';
@Component({
selector: 'form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class Form {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
password: ['', [PasswordValidator.strong]
],
});
}
}
import { FormControl } from '@angular/forms';
export interface ValidationResult {
[key: string]: boolean;
}
export class PasswordValidator {
public static strong(control: FormControl): ValidationResult {
let hasNumber = /\d/.test(control.value);
let hasUpper = /[A-Z]/.test(control.value);
let hasLower = /[a-z]/.test(control.value);
// console.log('Num, Upp, Low', hasNumber, hasUpper, hasLower);
const valid = hasNumber && hasUpper && hasLower;
if (!valid) {
// return what´s not valid
return { strong: true };
}
return null;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment