ng-dynaform/src/app/dynaform/components/custom/multiline/multiline.component.ts

import { Component, forwardRef } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { CustomInputComponent } from './../../_abstract/custom-input.component';

@Component({
	selector: 'app-multiline',
	templateUrl: './multiline.component.html',
	styleUrls: ['./multiline.component.scss'],
	providers: [
		{
			provide: NG_VALUE_ACCESSOR,
			useExisting: forwardRef(() => MultilineComponent),
			multi: true
		}
	]
})
export class MultilineComponent extends CustomInputComponent {

	exposeMetaInTemplate: string[] = ['maxLineLength'];
	linesArr: string[];
	value: string;

	public writeValue(value: any): void {
		this.value = value;
		this.splitIntoLines(value, this.meta.lines || 5);
	}

	private updateValue(): void {
		this.value = this.recombineLines(this.linesArr);
		this.propagateChange(this.value);
	}

	private splitIntoLines(value: string, numLines: number): void {
		this.linesArr = this.control.value.split(/\n/);
		if (this.linesArr.length < numLines) {
			const shortfall = numLines - this.linesArr.length;
			this.linesArr = [...this.linesArr, ...Array(shortfall).fill('')];
		} else {
			this.linesArr = this.linesArr.slice(0, numLines);
		}
	}

	private recombineLines = (linesArr: string[]): string => {
		return linesArr.join('\n');
	}

	private trackByFn(index: any, item: any) {
		return index;
	}
}