### File

`projects/commons/src/lib/elements/password/components/password.component.ts`

### Extends

`Field`

### Implements

`OnInit`

### Metadata

selector | `cmn-password`
templateUrl | `./password.component.html`

### Index

###### Properties
Public icon Public isLoaded Public type Public form
###### Methods
Public ngOnInit Private setValidatorsForms Public toggleTypeAndIcon Protected addFormValidator Public ngOnInit
###### Inputs
confirm forceError hasIcon label labels name names placeholder size

### Constructor

`constructor(viewRef: ViewContainerRef)`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:30
Parameters :
Name | Type | Optional
viewRef | `ViewContainerRef` | No

### Inputs

confirm
Type : `literal type`
Default value : `{}`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:23

forceError
Type : `boolean`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:21

hasIcon
Type : `boolean`
Default value : `true`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:22

label
Type : `string`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:30

labels
Type : `Data`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:17

name
Type : `string`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:29

names
Type : `string[]`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:18

placeholder
Type : `string`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:20

size
Type : `Sizes`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:19

### Methods

Public ngOnInit
`ngOnInit()`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:36
Returns : `void`

Private setValidatorsForms
`setValidatorsForms()`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:60
Returns : `void`

Public toggleTypeAndIcon
`toggleTypeAndIcon()`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:50
Returns : `void`

Protected addFormValidator
`addFormValidator(name: string, validators: Validators, value: string)`
Inherited from `Field`
Defined in `Field:17`
Parameters :
Name | Type | Optional | Default value
name | `string` | No |
validators | `Validators` | No |
value | `string` | No | `''`
Returns : `void`

Public ngOnInit
`ngOnInit()`
Inherited from `Field`
Defined in `Field:9`
Returns : `void`

### Properties

Public icon
Default value : `passwordIconEnum.password`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:27

Public isLoaded
Type : `boolean`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:25

Public type
Default value : `passwordTypeEnum.password`
Defined in projects/commons/src/lib/elements/password/components/password.component.ts:26

Public form
Type : `FormGroup`
Inherited from `Field`
Defined in `Field:5`

    import { Data } from '@angular/router';
    import { Validators } from '@angular/forms';
    import { Component, Input, OnInit, ViewContainerRef } from '@angular/core';

    import { Sizes } from '../../../shared/enums';
    import { passwordValidator } from '../validators';
    import { Field } from '../../../core/field/abstract';
    import { confirmValidator } from '../../../shared/validators';
    import { passwordIconEnum, passwordTypeEnum } from '../enums';

    @Component({
        selector: 'cmn-password',
        templateUrl: './password.component.html',
    })

    export class PasswordComponent extends Field implements OnInit {
        @Input() public labels: Data;
        @Input() public names: string[];
        @Input() public readonly size: Sizes;
        @Input() public readonly placeholder: string;
        @Input() public readonly forceError: boolean;
        @Input() public readonly hasIcon: boolean = true;
        @Input() public readonly confirm: { control?: string, formName?: string } = {};

        public isLoaded: boolean;
        public type = passwordTypeEnum.password;
        public icon = passwordIconEnum.password;

        @Input() private readonly name: string;
        @Input() private readonly label: string;

        constructor(private readonly viewRef: ViewContainerRef) {
            super(viewRef);
        }

        public ngOnInit(): void {
            super.ngOnInit();

            if (this.name) {
                this.names = [ this.name ];
                this.labels = { [this.name]: this.label };
            }

            if (this.names) {
                console.log('names', this.names);
                this.setValidatorsForms();
            }
        }

        public toggleTypeAndIcon() {
            if (this.type === passwordTypeEnum.password) {
                this.type = passwordTypeEnum.text;
                this.icon = passwordIconEnum.text;
            } else {
                this.type = passwordTypeEnum.password;
                this.icon = passwordIconEnum.password;
            }
        }

        private setValidatorsForms() {
            for (const name of this.names) {
                const validators = name !== this.confirm.control ?
                    [ Validators.required, passwordValidator ] :
                    [ Validators.required, passwordValidator, confirmValidator(this.confirm.formName) ];

                console.log(name, validators);

                this.addFormValidator(name, validators);
            }

            this.isLoaded = true;
        }
    }

    <ng-container *ngFor="let name of names">
        <div class="field"
             *ngIf="isLoaded">
            <label class="label"
                   *ngIf="labels[name]">
                {{ labels[name] }}
            </label>
            <cmn-input [name]="name"
                       [size]="size"
                       [placeholder]="placeholder"
                       [forceError]="forceError"
                       [iconRight]="hasIcon ? icon : ''"
                       (onClickIconRight)="toggleTypeAndIcon()"
                       [formGroup]="form"
                       [type]="type">
            </cmn-input>
        </div>
    </ng-container>

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""