Strength
Makes sure the value's strength matches a predefined regex expression. You can add to or override the regex expression from your root config. You can add to or modify the progress bar's color combination from your root config.
- a: String must be 8 characters long.
- b: String must contain one uppercase letter.
- c: String must contain one special character.
- d: String must contain one digit.
- e: String must contain one lowercase letter.
Avoid using this rule in the chain rule, as it is based on a progress bar. The better approach is to use it as a separate directive, side by side with your chain rules.
#Directive Code Snippet
<!DOCTYPE html>
<html lang="en">
...
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<input strength="<STRENGTH_RULE_KEYS>,<MAX_SCORE_THRESHOLD>" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
<ng-absolute-validator [formInstance]="<name>"></ng-absolute-validator>
</form>
...
</html>
#Chain Rule Code Snippet
<!DOCTYPE html>
<html lang="en">
...
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<input rule="strength:<STRENGTH_RULE_KEYS>,<MAX_SCORE_THRESHOLD>" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
<ng-absolute-validator [formInstance]="<name>"></ng-absolute-validator>
</form>
...
</html>
#Reactive Form Code Snippet
//component.ts
export class ReactiveComponent{
public form !: FormGroup;
constructor(
private fb : FormBuilder,
private rv : ReactiveValidator,
){this.generteForm()}
generteForm(){
this.form = this.fb.group({
<name> : ['',this.rv.map('strength:<STRENGTH_RULE_KEYS>,<MAX_SCORE_THRESHOLD>',<CUSTOM_MESSAGE>)]
})
}
}
//component.html
<!DOCTYPE html>
<html lang="en">
...
<form [formGroup]="form">
<input type="text" name="<name>" formControlName="<name>">
<ng-absolute-validator [formInstance]="form.get(<name>)"></ng-absolute-validator>
</form>
...
</html>