You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+23-21Lines changed: 23 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -173,24 +173,23 @@ export class OtherModule {
173
173
174
174
## API
175
175
176
-
### `<mat-password-strength>` used to calculate and display the strength of a provided password
176
+
### `<mat-password-strength>` used to calculate and display the strength of a provided password - [see the demo examples](https://angular-material-extensions.github.io/password-strength/examples)
| externalError | `Input() ` | boolean | `false` | used to change the color of the password to warn if an external error occurs
184
-
| enableLengthRule | `Input() ` | boolean | true | whether to validate the length of the password
185
-
| enableLowerCaseLetterRule | `Input() ` | boolean | true | whether a lowercase letter is optional
186
-
| enableUpperCaseLetterRule | `Input() ` | boolean | true | whether a uppercase letter is optional
187
-
| enableDigitRule | `Input() ` | boolean | true | whether a digit char is optional
188
-
| enableSpecialCharRule | `Input() ` | boolean | true | whether a special char is optional
189
-
| min | `Input() ` | number | 8 | the minimum length of the password
190
-
| max | `Input() ` | number | 30 | the maximum length of the password
191
-
| onStrengthChanged | Output() | number | - | emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100%
192
-
193
-
### `<mat-password-strength-info>` used to display more information about the strength of a provided password
182
+
| externalError | `Input() ` | `boolean` | `false` | used to change the color of the password to warn if an external error occurs
183
+
| enableLengthRule | `Input() ` | `boolean` | `true` | whether to validate the length of the password
184
+
| enableLowerCaseLetterRule | `Input() ` | `boolean` | `true` | whether a lowercase letter is optional
185
+
| enableUpperCaseLetterRule | `Input() ` | `boolean` | `true` | whether a uppercase letter is optional
186
+
| enableDigitRule | `Input() ` | `boolean` | `true` | whether a digit char is optional
187
+
| enableSpecialCharRule | `Input() ` | `boolean` | true | whether a special char is optional
188
+
| min | `Input() ` | `number` | 8 | the minimum length of the password
189
+
| max | `Input() ` | `number` | 30 | the maximum length of the password
190
+
| onStrengthChanged | Output() | `number` | - | emits the strength of the provided password in % e.g: 20%, 40%, 60%, 80% or 100%
191
+
192
+
### `<mat-password-strength-info>` used to display more information about the strength of a provided password - [see the demo examples](https://angular-material-extensions.github.io/password-strength/examples/mat-password-strength-info)
| digitsCriteriaMsg | `Input() ` | `string` | contains at least one digit character | an appropriate msg for the digit case %
202
201
| specialCharsCriteriaMsg | `Input() ` | `string` | contains at least one special character | an appropriate msg for the special case %
203
202
| customCharsCriteriaMsg | `Input() ` | `string` | contains at least one custom character | an appropriate msg for the custom validator case %
204
-
| minCharsCriteriaMsg | `Input() ` | `string` | contains at least ${this.passwordComponent.min} characters | an appropriate msg for the minimum number of chars %
203
+
| minCharsCriteriaMsg | `Input() ` | `string` | contains at least ${this.passwordComponent.min} characters | an appropriate msg for the minimum `number` of chars %
205
204
206
205
207
206
### `<mat-pass-toggle-visibility>` used to show/hide the password provided in the input element
@@ -226,7 +225,7 @@ add the `@angular-material-extensions/password-strength` element to your templat
226
225
This will display only the material password strength meter in form of a progress without any input fields
227
226
or similar.
228
227
229
-
####In the following example, we integration a material input container with `@angular-material-extensions/password-strength` 's component.
228
+
### In the following example, we integration a material input container with `@angular-material-extensions/password-strength` 's component.
230
229
231
230
NOTE: In order to repaint the mat-form-field correctly after changing the value of the password's strength, please consider
232
231
to change the detection strategy for the parent component -->
@@ -269,7 +268,7 @@ export class HomeComponent implements OnInit {}
269
268
270
269
[learn more about mat-form-field](https://material.angular.io/components/input/overview)
271
270
272
-
####Example of how to use the emitted strength of the password in your template
271
+
### Example of how to use the emitted strength of the password in your template
273
272
274
273
```html
275
274
<divfxLayout="row"fxLayoutGap="10px">
@@ -287,7 +286,7 @@ export class HomeComponent implements OnInit {}
287
286
</div>
288
287
```
289
288
290
-
####Use the toggle visibility component
289
+
### Use the toggle visibility component
291
290
292
291
- add the `mat-pass-toggle-visibility` to your `mat-form-field`
293
292
- give it a name to use it in the html file like `toggle`
@@ -309,7 +308,7 @@ export class HomeComponent implements OnInit {}
309
308
</mat-form-field>
310
309
```
311
310
312
-
####Client Side password's validation using a built in angular formController
311
+
### Client Side password's validation using a built in angular formController
313
312
314
313
1. add an input element to your template with an appropriate @angular-material-extensions/password-strength's component
315
314
2. hold a reference of the @angular-material-extensions/password-strength's component by adding `passwordComponentWithValidation` (or whatever you want) inside the element
@@ -367,7 +366,7 @@ this will looks like -->
367
366
368
367
---
369
368
370
-
####custom regex validation
369
+
### custom regex validation
371
370
372
371
please consider to use the `customValidator` input (see below)
373
372
@@ -407,9 +406,12 @@ please consider to use the `customValidator` input (see below)
407
406
pattern=newRegExp(/^(?=.*?[äöüÄÖÜß])/);
408
407
```
409
408
409
+
### Confirm the password with built in angular form controllers - [see the live example](https://angular-material-extensions.github.io/password-strength)
410
410
411
411
412
-
#### Supporting custom messages and ngx-translate for the info component please check the example demo [here](https://angular-material-extensions.github.io/password-strength/examples/mat-password-strength-info)
412
+
413
+
414
+
### Supporting custom messages and ngx-translate for the info component please check the example demo [here](https://angular-material-extensions.github.io/password-strength/examples/mat-password-strength-info)
0 commit comments