projects/commons/src/lib/elements/inputs/components/input.component.ts
| selector | cmn-input |
| styleUrls | ./input.component.scss |
| templateUrl | ./input.component.html |
Properties |
Methods |
|
Inputs |
Outputs |
constructor(viewRef: ViewContainerRef)
|
||||||
|
Parameters :
|
| forceError | |
Type : boolean
|
|
| formGroup | |
Type : FormGroup
|
|
| iconLeft | |
Type : string
|
|
| iconRight | |
Type : string
|
|
| isLoading | |
Type : boolean
|
|
| name | |
Type : string
|
|
| placeholder | |
Type : string
|
|
| size | |
Type : Sizes
|
|
| type | |
Type : string
|
|
Default value : 'text'
|
|
| value | |
Type : string
|
|
| onClickIconRight | |
Type : EventEmitter<void>
|
|
| Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Parameters :
Returns :
void
|
| Public ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Protected addFormValidator | ||||||||||||||||
addFormValidator(name: string, validators: Validators, value: string)
|
||||||||||||||||
|
Inherited from
Field
|
||||||||||||||||
|
Defined in
Field:17
|
||||||||||||||||
|
Parameters :
Returns :
void
|
| Public ngOnInit |
ngOnInit()
|
|
Inherited from
Field
|
|
Defined in
Field:9
|
|
Returns :
void
|
| Public sizeIcon |
Type : string
|
| 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