Bug Report or Feature Request (mark with an x
)
- [] bug report -> please search issues before submitting
- [X ] feature request
OS and Version?
Windows 10
Versions
Angular CLI: 8.0.4
Node: 10.16.0
OS: win32 x64
Angular: 8.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.800.4
@angular-devkit/build-angular 0.800.4
@angular-devkit/build-optimizer 0.800.4
@angular-devkit/build-webpack 0.800.4
@angular-devkit/core 8.0.4
@angular-devkit/schematics 8.0.4
@angular/cdk 8.0.1
@angular/cli 8.0.4
@angular/material 8.0.1
@ngtools/webpack 8.0.4
@schematics/angular 8.0.4
@schematics/update 0.800.4
rxjs 6.4.0
typescript 3.4.5
webpack 4.30.0
Repro steps
clean Angular 8 project, adding FormGroup with different fields, including password-strength component.
form.component.ts
signupForm: FormGroup;
ngOnInit() {
this.signupForm = this.formBuilder.group({
passwordComponent: ["", [Validators.required, Validators.pattern]],
confirmPassword: ["", [Validators.required, Validators.pattern]],
email: ["", [Validators.required, Validators.email]],
name: ["", [Validators.required]],
rememberPassword: [false]
});
}
form.component.html
<form class="form-signin" (ngSubmit)="onSubmit()" novalidate [formGroup]="signupForm">
<mat-form-field class="full-width">
<input
type="text"
maxlength="50"
formControlName="name"
required
matInput
placeholder="Full Name"
/>
<mat-error *ngIf="hasError('name', 'required')" >Name is required</mat-error>
</mat-form-field>
<mat-form-field class="full-width">
<input
type="email"
maxlength="50"
formControlName="email"
required
matInput
placeholder="Email"
/>
<mat-error *ngIf="hasError('email', 'required')">Email is required</mat-error>
</mat-form-field>
<!--password input filed-->
<mat-form-field
appearance="outline"
[color]="passwordComponentWithConfirmation.color"
style="width: 100%" >
<mat-label>Password</mat-label>
<mat-pass-toggle-visibility #toggle3 matSuffix > </mat-pass-toggle-visibility>
<input
matInput
#passwordWithConfirmation
[type]="toggle3.type"
formControlName="passwordComponent"
placeholder="Password"
required
/>
<!--password hint-->
<mat-hint align="end" aria-live="polite">
{{ passwordWithConfirmation.value.length }} /
{{ passwordComponentWithConfirmation.max }}
</mat-hint>
<mat-error
*ngIf="passwordComponentWithConfirmation.passwordFormControl.hasError('required')">
Password is required
</mat-error>
<mat-error
*ngIf="passwordComponentWithConfirmation.passwordFormControl.hasError('pattern')">
Password is not valid
</mat-error>
</mat-form-field>
<!--@angular-material-extensions/password-strength's main component-->
<mat-password-strength
#passwordComponentWithConfirmation
[password]="passwordWithConfirmation.value">
</mat-password-strength>
<!--Password's strength info-->
<mat-password-strength-info
[passwordComponent]="passwordComponentWithConfirmation">
</mat-password-strength-info>
<!--password input field for confirmation-->
<mat-form-field
appearance="outline"
class="mt-3"
style="width: 100%">
<mat-label>Confirm Password</mat-label>
<mat-pass-toggle-visibility
#toggleConfirmPassword
matSuffix>
</mat-pass-toggle-visibility>
<input
matInput
#passwordToConfirm
[type]="toggleConfirmPassword.type"
[formControl]="passwordComponentWithConfirmation.passwordConfirmationFormControl"
placeholder="Password"
/>
<!-- password hint-->
<mat-hint align="end" aria-live="polite">
{{ passwordToConfirm.value.length }} /
{{ passwordComponentWithConfirmation.max }}
</mat-hint>
<!-- password error msgs-->
<mat-error
*ngIf="passwordComponentWithConfirmation.passwordConfirmationFormControl.hasError('required'
)
"
>
Password confirmation is required
</mat-error>
<mat-error *ngIf="passwordComponentWithConfirmation.passwordConfirmationFormControl.hasError('notConfirmed')">
Password is not the same
</mat-error>
</mat-form-field>
<div class="justify-right">
<mat-checkbox name="rememberPasswordField">זכור סיסמא
</mat-checkbox>
</div>
<button
mat-raised-button
color="primary"
[disabled]="!signupForm.valid">
Register
</button>
</form>
Desired functionality
I would like to create a FormGroup and attach different fields to it, including the password-strength component. As for now, the Submit button is enabled regardless of the password-strength validation status. i.e. even if the password is not strong enough, the Submit button gets enabled if all the other fields are valid.
I tried using MatPasswordStrengthValidator
but couldn't find the right usage for it for this cause.
Workaround (for those who needs this functionality for now)
export function ValidatePasswordStrength(control: AbstractControl) {
// numbers, uppercase and minimum 8 chars
// just change this regex to fit your needs
const regex = new RegExp(/^(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/);
if (!regex.test(control.value)) {
return { invalidPassword: true };
}
return null;
}
this.signupForm = this.formBuilder.group({
passwordComponent: ["", [Validators.required, ValidatePasswordStrength]],
confirmPassword: ["", [Validators.required, Validators.pattern]],
email: ["", [Validators.required, Validators.email]],
name: ["", [Validators.required]],
rememberPassword: [false]
});
<mat-error
*ngIf="
signupForm.get('passwordComponent').errors &&
signupForm.get('passwordComponent').dirty &&
signupForm.get('passwordComponent').hasError('invalidPassword')">
Please enter a valid password
</mat-error>