### File

`projects/commons/src/lib/elements/inputs/components/input.component.ts`

### Extends

`Field`

### Implements

`OnInit` `OnChanges`

### Metadata

selector | `cmn-input`
styleUrls | `./input.component.scss`
templateUrl | `./input.component.html`

### Index

###### Properties
Public sizeIcon Public form
###### Methods
Public ngOnChanges Public ngOnInit Protected addFormValidator Public ngOnInit
###### Inputs
forceError formGroup iconLeft iconRight isLoading name placeholder size type value
###### Outputs
onClickIconRight

### Constructor

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

### Inputs

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

formGroup
Type : `FormGroup`
Defined in projects/commons/src/lib/elements/inputs/components/input.component.ts:22

iconLeft
Type : `string`
Defined in projects/commons/src/lib/elements/inputs/components/input.component.ts:17

iconRight
Type : `string`
Defined in projects/commons/src/lib/elements/inputs/components/input.component.ts:18

isLoading
Type : `boolean`
Defined in projects/commons/src/lib/elements/inputs/components/input.component.ts:19

name
Type : `string`
Defined in projects/commons/src/lib/elements/inputs/components/input.component.ts:16

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

size
Type : `Sizes`
Defined in projects/commons/src/lib/elements/inputs/components/input.component.ts:15

type
Type : `string`
Default value : `'text'`
Defined in projects/commons/src/lib/elements/inputs/components/input.component.ts:23

value
Type : `string`
Defined in projects/commons/src/lib/elements/inputs/components/input.component.ts:14

### Outputs

onClickIconRight
Type : `EventEmitter<void>`
Defined in projects/commons/src/lib/elements/inputs/components/input.component.ts:25

### Methods

Public ngOnChanges
`ngOnChanges(changes: SimpleChanges)`
Defined in projects/commons/src/lib/elements/inputs/components/input.component.ts:39
Parameters :
Name | Type | Optional
changes | `SimpleChanges` | No
Returns : `void`

Public ngOnInit
`ngOnInit()`
Defined in projects/commons/src/lib/elements/inputs/components/input.component.ts:33
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 sizeIcon
Type : `string`
Defined in projects/commons/src/lib/elements/inputs/components/input.component.ts:27

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

    import { FormGroup } from '@angular/forms';
    import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewContainerRef } from '@angular/core';

    import { Sizes } from '../../../shared/enums';
    import { Field } from '../../../core/field/abstract';

    @Component({
        selector: 'cmn-input',
        templateUrl: './input.component.html',
        styleUrls: [ './input.component.scss' ],
    })

    export class InputComponent extends Field implements OnInit, OnChanges {
        @Input() public value: string;
        @Input() public readonly size: Sizes;
        @Input() public readonly name: string;
        @Input() public readonly iconLeft: string;
        @Input() public readonly iconRight: string;
        @Input() public readonly isLoading: boolean;
        @Input() public readonly placeholder: string;
        @Input() public readonly forceError: boolean;
        @Input() public readonly formGroup: FormGroup;
        @Input() public readonly type: string = 'text';

        @Output('onClickIconRight') public readonly fireClickIconRight: EventEmitter<void> = new EventEmitter<void>();

        public sizeIcon: string;

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

        public ngOnInit(): void {
            if (!this.formGroup) {
                super.ngOnInit();
            }
        }

        public ngOnChanges(changes: SimpleChanges): void {
            const { forceError } = changes;

            if (forceError && !forceError.firstChange && forceError.currentValue) {
                (this.formGroup || this.form).controls[this.name].markAsDirty();
            }
        }
    }

    <div class="control"
         [formGroup]="form || formGroup"
         [class.has-icons-left]="iconLeft"
         [class.has-icons-right]="iconRight">
        <input class="input {{ size }}"
               [formControlName]="name"
               [class.is-loading]="isLoading"
               [type]="type"
               [placeholder]="placeholder"/>

        <span class="icon {{ sizeIcon }} is-left"
              *ngIf="iconLeft">
          <i class="{{ iconLeft }}"></i>
        </span>
        <span class="icon {{ sizeIcon }} is-right"
              (click)="fireClickIconRight.emit()"
              *ngIf="iconRight">
          <i class="{{ iconRight }}"></i>
        </span>
    </div>

    <cmn-errors [name]="name"></cmn-errors>

`./input.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""