Add textarea.component.ts
Create the following file in your project.
textarea.component.ts
import {
ChangeDetectionStrategy,
Component,
computed,
effect,
ElementRef,
forwardRef,
inject,
input,
model,
ViewEncapsulation,
} from '@angular/core';
import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import type { ClassValue } from 'clsx';
import { ZardInputGroupComponent } from '@/shared/components/input-group';
import { mergeClasses, noopFn } from '@/shared/utils/merge-classes';
import { inputGroupTextAreaVariants, textareaVariants } from './textarea.variants';
type OnTouchedType = () => void;
type OnChangeType = (value: string) => void;
@Component({
selector: 'textarea[z-textarea]',
template: '',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ZardTextareaComponent),
multi: true,
},
],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[attr.data-slot]': 'parentGroup ? "input-group-control" : "textarea"',
'[class]': 'classes()',
'(input)': 'updateValue($event.target)',
'(blur)': 'onBlur()',
},
exportAs: 'zTextarea',
})
export class ZardTextareaComponent implements ControlValueAccessor {
readonly parentGroup = inject(ZardInputGroupComponent, { optional: true });
private readonly elementRef = inject(ElementRef<HTMLTextAreaElement>);
private onTouchedFn: OnTouchedType = noopFn;
private onChangeFn: OnChangeType = noopFn;
readonly class = input<ClassValue>('');
readonly value = model<string>('');
protected readonly classes = computed(() =>
mergeClasses(textareaVariants(), this.parentGroup ? inputGroupTextAreaVariants() : '', this.class()),
);
constructor() {
effect(() => {
const value = this.value();
if (value !== undefined && value !== null) {
this.elementRef.nativeElement.value = value;
}
});
}
disable(b: boolean): void {
this.elementRef.nativeElement.disabled = b;
}
protected updateValue(target: EventTarget | null): void {
const el = target as HTMLTextAreaElement | null;
this.value.set(el?.value ?? '');
this.onChangeFn(this.value());
}
protected onBlur(): void {
this.onTouchedFn();
}
registerOnChange(fn: OnChangeType): void {
this.onChangeFn = fn;
}
registerOnTouched(fn: OnTouchedType): void {
this.onTouchedFn = fn;
}
setDisabledState(isDisabled: boolean): void {
this.elementRef.nativeElement.disabled = isDisabled;
}
writeValue(value?: string): void {
this.value.set(value ?? '');
}
}
