Angular 8 - formControlName inside Kendo TextArea component - css

Question

I am trying to use formControlName inside a Kendo Text Area, and have a outer component apply it.
Using the following code base link, its still not working.
Angular 2 - formControlName inside component
How would someone fix this?
InputText.ts
export class InputTextComponent implements AfterViewInit, ControlValueAccessor {
#Input() disabled: boolean;
#Output() saveValue = new EventEmitter();
value: string;
onChange: () => void;
onTouched: () => void;
writeValue(value: any) {
this.value = value ? value : "";
}
registerOnChange(fn: any) {this.onChange = fn}
registerOnTouched(fn: any) {this.onTouched = fn}
setDisabledState(isDisabled) {this.disabled = isDisabled}
}
InputText.html
<input kendoTextBox />

Answer 1

Not sure this is what you are asking but in order to use formControlName inside a custom component here is what you do
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { InputTextComponent } from './input-text';
#NgModule({
declarations: [
AppComponent,
InputTextComponent
],
imports: [
FormsModule,
ReactiveFormsModule,
BrowserModule,
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<form [formGroup]="details">
<input-text formControlName="name"></input-text>
<!-- This should show the name as you change it in your custom control -->
{{details.value | json}}
</form>
app.component.ts
import { Component } from '#angular/core';
import { FormGroup, FormControl } from '#angular/forms';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public details: FormGroup;
constructor(
) {
this.details = new FormGroup({
name: new FormControl("name")
});
}
}
input-text.component.html
<input kendoTextBox [(ngModel)]="value" (ngModelChange)="onChange($event)" />
input-text.component.ts
import { Component, forwardRef } from "#angular/core";
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "#angular/forms";
#Component({
selector: "input-text",
templateUrl: "./input-text.html",
styleUrls: ["./input-text.scss"],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputTextComponent),
multi: true
}
]
})
export class InputTextComponent implements ControlValueAccessor {
public value: string;
propagateChange = (value: string) => {};
writeValue(obj: any): void {
this.value = obj;
}
registerOnTouched(fn: any): void {}
registerOnChange(fn) {
this.propagateChange = fn;
}
onChange(newValue){
this.propagateChange(newValue);
}
}