44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { Component, input, forwardRef } from '@angular/core';
|
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'app-input',
|
|
standalone: true,
|
|
imports: [CommonModule, ReactiveFormsModule],
|
|
providers: [
|
|
{
|
|
provide: NG_VALUE_ACCESSOR,
|
|
useExisting: forwardRef(() => AppInputComponent),
|
|
multi: true
|
|
}
|
|
],
|
|
templateUrl: './app-input.component.html',
|
|
styleUrl: './app-input.component.scss'
|
|
})
|
|
export class AppInputComponent implements ControlValueAccessor {
|
|
label = input<string>('');
|
|
id = input<string>('input-' + Math.random().toString(36).substr(2, 9));
|
|
type = input<string>('text');
|
|
placeholder = input<string>('');
|
|
error = input<string | null>(null);
|
|
required = input<boolean>(false);
|
|
|
|
value: string = '';
|
|
disabled = false;
|
|
|
|
onChange: any = () => {};
|
|
onTouched: any = () => {};
|
|
|
|
writeValue(obj: any): void { this.value = obj || ''; }
|
|
registerOnChange(fn: any): void { this.onChange = fn; }
|
|
registerOnTouched(fn: any): void { this.onTouched = fn; }
|
|
setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
|
|
|
|
onInput(event: Event) {
|
|
const val = (event.target as HTMLInputElement).value;
|
|
this.value = val;
|
|
this.onChange(val);
|
|
}
|
|
}
|